How to upload image file using JavaScript File Upload control?
This article explains how to upload image files using JavaScript File Upload control.
To render the Syncfusion component, please follow the steps given in the getting started documentation page. You need to refer to the following script and style references to render the Uploader component in the application.
<!-- Syncfusion Essential JS 2 Styles --> <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" /> <!-- Syncfusion Essential JS 2 Scripts --> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
The Uploader control will be rendered using the input element, as mentioned in the following code example.
[index.html]
<input type="file" id="fileupload" name="UploadFiles">
[index.js]
// Initialize the uploader component
var uploadObj = new ej.inputs.Uploader({
});
uploadObj.appendTo('#fileupload');
Asynchronous Upload in the JavaScript (ES5) Uploader control
The uploader control processes the files to upload them in Asynchronous mode by default. Define the properties saveUrl and removeUrl to handle the save and remove action as pre-hosted server link as mentioned below.
[index.html]
<input type="file" id="fileupload" name="UploadFiles">
[index.js]
// Initialize the uploader component with async settings
var uploadObj = new ej.inputs.Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
removing: onFileRemove
});
uploadObj.appendTo('#fileupload');Else, we can configure the save and remove handlers on the server side manually, as mentioned in the documentation link.
Upload a file using drag and drop
The uploader component allows you to drag and drop the files to upload them. You can drag the files from the file explorer and drop into the drop area.
By default, the uploader component will act as the drop area element. The drop area gets highlighted when you drag the files over the drop area. You can also know more about the drag and drop using this documentation.
How to upload an Image using the JavaScript File Upload Control?
By default, the Uploader control allows you to select all types of files. But you can select a particular type of file using the AllowedExtensions property.
To select only an image file to upload, you need to provide the AllowedExtensions property value as “PNG, JPG, JPEG”. This will restrict the other type of files from being selected for uploading.
[index.js]
// Initialize the uploader component
var uploadObj = new ej.inputs.Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
removing: onFileRemove,
allowedExtensions: ".jpg,.png,.jpeg"
});
uploadObj.appendTo('#fileupload');
Refer to the working sample for additional details and implementation: Sample
To learn more about the Uploader component, refer to this UG Documentation, API Reference, and Demo sites.
Conclusion
I hope you enjoyed learning about how to upload image file using JavaScript File Upload control.
You can refer to our JavaScript file upload feature tour page to know about its other groundbreaking feature representations and documentation. You can also explore our JavaScript File Upload examples to understand how to present and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trialto check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal We are always happy to assist you!
