0.1.3 • Published 5 years ago
file-upload-component v0.1.3
File Upload Component
A work in progress HTML file upload with customizable upload backend.
Usage
Register Component
var UploadControllerFactory = require('uploadcontroller');
var UploadController = UploadControllerFactory({
// specify a built in upload method,
upload: UploadControllerFactory.XHR({
xhrUrl: 'http://localhost/upload.php?filename=$file', // you can use $file to put file name to the URL
xhrAsFormData: true, // if true, it sends the file as multipart data. Otherwise the whole file is sent as a body with correct mime type
xhrFormDataFileKey: 'file', // if xhrAsFormData true,
xhrMethod: 'POST', // default
xhrHeaders: {}, // extra headers to be sent
xhrCallback: function(xhr) { }, // XHR hook before sending data
})
// or a customized one
upload: function(name, blob, contentType, abort, progress) {
// Disables XHR and enables custom uploading backend.
// Function must return a promise that will resolve with a javascript object.
// when the user aborts the uploading, the AbortSignal is fired.
// upload progress can be reported back to library by calling progress function which accepts numbers from 0 to 1 (i.e. progress(50 / 100) means half of the upload is completed).
},
valueKey: 'id',
srcKey: 'access_url',
fields: ['id', 'access_url', 'name', 'size'] // save additional data from response, so they can be accessed from JavaScript with UploadController inside
});
Using it in a Form
<file-picker name="file" desc="Upload File"></file-picker>
Auto-picked file
<file-picker name="file" filename="2.jpg" size="88316" src="https://www.gstatic.com/webp/gallery/2.jpg" value="11" desc="Upload File"></file-picker>
Submitting Form
"valueKey" returned from the upload backend will be submitted in the form with "name" attribute on the element.