image-picker-component v0.1.1
Form Picker Component
A work in progress HTML File / Image picker with customizable upload backend. Currently, only image picker is implemented.
Usage
Register Component
require('image-picker-component').register("image-picker", (require('upload-controller-factory'))({
xhrUrl: 'http://localhost/upload.php?filename=$file', // you can use $file to put file name to the URL, or omit it altogether if you use FormData
xhrAsFormData: true, // if true, it sends the file as multipart data. Otherwise the whole file is sent as a body with content-type header as file type
xhrFormDataFileKey: 'file', // if xhrAsFormData true,
xhrMethod: 'POST', // default
xhrHeaders: {}, // extra headers to be sent
xhrCallback: function(xhr) { }, // XHR hook before sending data
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).
},
// dealing with response (or the object returned from upload function)
valueKey: 'id', // this field is submitted with the form (if the component has put inside a HTML form)
srcKey: 'access_url', // a full path where this file can be located
fields: ['id', 'access_url', 'name', 'size'], // save additional data from response, so they can be accessed from JavaScript with UploadController inside
}));
Crop Mode
User will be asked to crop the image no matter what. (Respecting Aspect Ratio)
<image-picker name="image_id" width="400" height="300" mode="crop"></image-picker>
Auto Mode
User will be asked to crop the image only if the aspect ratio does not match.
<image-picker name="image_id" width="1920" height="1080" mode="auto"></image-picker>
Keep Mode
The file will be uploaded as it is. (Ignoring Aspect Ratio)
<image-picker name="image_id" width="1920" height="1080" mode="keep"></image-picker>
Reformat Mode
The image will be uploaded as jpeg format without any other modification.
<image-picker width="1920" height="1080" mode="reformat" format="image/jpeg"></image-picker>
Note: Format attribute can be specified on all modes, except keep mode. You can specify "image/png" to upload it as PNG file.
Resize Mode
The image will be resized automatically for best-fit, respecting the aspect ratio of selected file (not the specified dimensions).
<image-picker width="1920" height="1080" mode="resize"></image-picker>
Notes
Adding value and src attribute will automatically make this input pre-picked.
<image-picker name="image_id" width="1920" height="1080" value="11" src="https://www.gstatic.com/webp/gallery/2.jpg"></image-picker>
Submitting Form
"valueKey" returned from the upload backend will be submitted in the form with "name" attribute on the element.