How to upload image file using JavaScript File Upload control?

This article explains you about, how to upload the 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 the following script and style reference 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 by 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 handler with 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 to be 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');
 

Please find the sample from the following link.

Link: https://stackblitz.com/edit/v6p1n6?file=index.js

To learn more about the Uploader component, refer to this UG Documentation, API Reference, and Demo sites.