How to Create a Custom Source for File Upload With Angular

Most JavaScript applications will handle file uploads at some point, built with simple but reliable functionality in mind. A file upload with Angular needs to be device compatible and secure in transferring user data.

Unlike plug-and-play solutions, an Angular file upload API yields far more engagement on web forms and rewards users with many rich features.

Editing the input field can also be challenging without access to UI kits, plugins, or reproducible templates.

Thus, a file upload with Angular fixes this by adding dynamic components to the “Choose File” button and file name text.

But what about hardwiring a system to send files over the cloud using advanced delivery capabilities?

A server-side API might just be the right call as you take shortcuts to develop a file upload element by first creating an HTTP client request.

What Is A Custom Source For A File Upload In Angular

Firstly, one impressive feature on Filestack is the Custom Source integration for the File Picker. Once a picker widget is ready, create a dynamic object to store and label each user file.

const customSource = {
  label: 'LABEL_IN_MENU',
  name: 'CUSTOM_SOURCE_KEY_NAME',
  icon: 'ICON.svg',
  mounted: (element, actions) => {
  },
  unmounted: (element) => {
  }
}

Next, refer to the customSource object from the configuration code, where various sources detect the API key, such as the local file system.

The maxFiles parameter lets you limit how many files can be uploaded per session. You can also toggle options from the File Picker menu to call methods after mounting the view.

const apikey = YOUR_APIKEY;
  const client = filestack.init(apikey);
  const options = {
    fromSources: [ 'local_file_system', customSource, 'googledrive', 'unsplash', 'facebook', 'instagram'],
    maxFiles: 20,
    uploadInBackground: false,
    onUploadDone: (res) => console.log(res),
  };
  const picker = client.picker(options);
  picker.open();
});

Speaking of methods, they accept the specified parameters shown below:

• rawFile – actions.addRawFile(fileObj) grabs the raw file contents and takes you to the summary view

  
  

• customFileObj – actions.addCustomFile(customFileObj) adds a custom file object that includes the URL, file type, display name, and optional headers

  
  

• fetchAndAddURL – actions.fetchAndAddUrl(url, headers) collects the URL metadata and appends it to the upload queue

  
  

• metadata – actions.metadata(url, headers) retrieves the file data from a URL path in JSON format with the filename, link, thumbnail, modified date, etc.

  
  

• getFile – actions.getFile(uuid) returns a converted file ready to upload via the UUID

  
  

How Do You Make A Custom Source Plugin That Supports File Upload With Angular

The building blocks of a Custom Source plugin are the name, label, icon, and mounted and unmounted actions. To illustrate how it works, let’s try presenting a list of files inside the uploader.

Firstly, for this sample list, make an array of dictionaries to include the thumbnail name and URL under sourceURLsArray. The next step is to define a myNewCustomSource object, which should have the icon HTML.

Inside the mounted attribute, a new list is generated for the plugin view by iterating over each list/span element, attaching the thumbnail, and adding them to the list.

mounted: (element, actions) => {
        // create new list for plugin view
        const list = document.createElement('ul');
        list.setAttribute('class', 'fsp-picker--custom-source');
        sourceUrlsArray.forEach((element, idx) => {
            // add list element
            const li = document.createElement("li");
            const span = document.createElement("span");
            // create thumbnail view
            const thumb = document.createElement("img");
            thumb.setAttribute("src", element.url);
            thumb.width = "50";
            thumb.height = "50";
            // append elements to list
            li.appendChild(thumb);
            span.innerHTML = `${element.name}`;
            li.appendChild(span);
            list.appendChild(li);
        });
        // append list to picker placeholder
        element.appendChild(list);
    },

This snippet is reusable on other actions, including the click event handler operation. The Filestack tutorial also further explains the potential use cases for a custom source plugin.

What Are The Best Utilities To Carry Out On A File Upload With Angular

An Angular.js file upload would benefit from having a drag and drop feature, helping users move a file from their storage drive to another location.

Users should also be able to transfer items between browser tabs or modify their files' layout.

A drag and drop action might also involve rearranging the order of files uploaded.

Another is to grab an image and share it on a preferred social app. This would certainly enhance the usability of your websites.

More importantly, safeguard your file upload API against security risks, especially on user-generated content where data theft is likely to occur.

Be sure the upload service scans each file for malware and verifies the file type before it migrates to a directory on the back end. Likewise, you can limit the file size to reduce the latency cost.

Additionally, using an Angular SDK, you can simplify the process of converting files. At times, users are required to submit documents in PDF or DOCX format, so a converter is nice to have.

As for uploading images, a PNG to JPG converter will compress files to a manageable size. Think about integrating this core feature through the Processing Engine API.

A File Uploading Solution for Angular

Third-party services such as this are connected to several server-side APIs and host their Image Editor SDKs.

There are flexible service plans for uploading files in React and uploading files in Angular so that users. You can enjoy faster uploads from the file picker or drag and drop to see what’s inside the files.

To a greater extent, the Angular file upload SDK lets you copy and paste a file straight from your computer.

Moreover, it has cost-saving measures such as unlimited uploads from any local drive. Thus, your users will get to transform or crop image files as they see fit.

Additionally, a preview option is available on this Angular API, ensuring that your users have a chance to correct any issues with the file formats.

Employ custom CSS to design your app or enable multi-file uploads from remote sources. And finally, web content is loaded from a URL and rendered onto the page.

Also published here.