BLOGS

2
By sylvia Web JavaScript

File Uploads using Uploadcare for HTML/Javascript

File Uploader:

Uploadcare File Uploader is a responsive and mobile-ready HTML5 website solution that allows users to select and upload multiple files from various sources. Also, it includes an in-browser image editor. You can customize the appearance and functionality to match your website and task.

File Uploader is supplied as a JavaScript library. It overrides an <input type=”file”> control on an HTML page with a button that opens up the File Uploader dialog. File Uploads using Uploadcare for HTML/Javascript. Uploadcare is a complete file handling platform for online business. Receive files from you users via File Uploader or File Upload API, implement image optimization and transformations with Image CDN API, and get HIPAA-compliant storage. Uploadcare is a tool in the File Uploads category of a tech stack.

 

File Uploader Features:

File Uploader helps you perform the following tasks:
         i.   Uploading
         ii.  Image Handling
         iii. Validation
         iv. Security
         v.  Reliability
File Uploads using Uploadcare for HTML/Javascript

Supported browsers:

       The current File Uploader (v3) works in all modern browsers, desktop and mobile. Here’s a list of supported browsers:

Desktop

Chrome: 37+
Firefox: 32+
Safari: 9+
Edge: 12+
IE: 10+

Mobile

Android Browser: 4.4+
Opera Mobile: 8+
iOS Safari: 9+
IE Mobile: 11+
Opera Mini: Last
 The File Uploader will most probably run in older browser versions as well. In case you need legacy browser support (IE8), try out File Uploader v2.

Installation:

Dependencies

Uploadcare File Uploader doesn’t have any external dependencies except for jQuery. Generally, File Uploader comes in two versions: with and without jQuery.

Global installation:

           Globals are specified as global JavaScript variables in your.
For example:
    <script>
    UPLOADCARE_PUBLIC_KEY = ‘demopublickey’;
    UPLOADCARE_LOCALE = ‘en’;
    UPLOADCARE_CLEARABLE = true;
    UPLOADCARE_TABS = “default”;
    UPLOADCARE_TABS = ‘url file facebook’;
    </script>
    <script src=”https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js”>  </script>
   
Now you can use the Uploader:
      <div style=”background-color: #a6a6a6;”> </div>
File Uploads using Uploadcare for HTML/Javascript

NPM:

  npm install uploadcare-widget
  import uploadcare from ‘uploadcare-widget’
  You can get a file uploader instance and configure it with configuration object:
  <input id=”uploader” type=”hidden” />
   const widget = uploadcare.Widget(“#uploader”, { publicKey:’demopublickey’,imagesOnly: true,crop: ‘300×200’ });

Image crop:

             Uploadcare File Uploader features a good bunch of crop options, including free crop. Adding the feature to your File Uploader instance is done by implementing the data-crop option.
Note that it’ll add an additional step of image editing.

Configuring Crop:

             Crop options are held inside the data-crop attribute as a comma-separated string with presets names. When you define several presets, users will be able to choose from the related crop options right in the UI.
             Each crop preset is a combination of a size or ratio definition and an optional keyword:
                 i. “disabled”, crop is disabled. It can’t be combined with other presets.
                 ii. “” or “free”, crop is enabled. Users can freely select any crop area on their images.
                 iii. “2:3”, any area with the aspect ratio of 2:3 can be selected for cropping.
                 iv. “300×200” — same as above, but if the selected area is greater than 300×200 pixels, the resulting image will be downscaled to fit the dimensions.
                 v. “300×200 upscale” — same as above, but even if the selected area is smaller, the resulting image gets upscaled to fit the dimensions.
                 vi. “300×200 minimum” — users won’t be able to define an area smaller than 300×200 pixels. If an image we apply the crop to is smaller than 300×200 pixels, it will be upscaled to fit the dimension.

Crop examples:

Free crop:
     <input type=”hidden” role=”uploadcare-uploader” name=”my_file” data-crop=”” />

Choosing from predefined aspect ratios:

     <input type=”hidden” role=”uploadcare-uploader” name=”my_file” data-crop=”” />

Fixed aspect ratio:

<input type=”hidden” role=”uploadcare-uploader” name=”my_file” data-crop=”4:3″ />

Fixed size with upscaling:

<input type=”hidden” role=”uploadcare-uploader” name=”my_file” data-crop=”400×300 upscale” />
List of supported Upload Sources:
CodeFile SourceDefault
fileLocal diskOn
cameraLocal webcamOn
urlAny URLOn
facebookFacebookOn
gdriveGoogle DriveOn
gphotosGoogle PhotosOn
dropboxDropboxOn
instagramInstagramOn
evernoteEvernoteOn
flickrFlickrOn
onedriveOneDriveOn
boxBoxOff
vkVKOff
huddleHuddleOff
File Uploads using Uploadcare for HTML/Javascript
sylvia / About Author
More posts by sylvia