File uploads in Angular 10+ (or JavaScript in general)
Tags: angular, javascript, beginners
Published: 2021-06-06 11:59:22

Recently, I was working on a side project where I had to upload multiple files. It was a while back that I last worked on file uploads in Angular. So my first instinct was to search for some resources on file uploads in Angular. As expected, I found a lot of them (e.g [Angular 10 Multiple Image Upload with Preview Example](https://www.itsolutionstuff.com/post/angular-10-multiple-image-upload-with-preview-exampleexample.html), [How to upload single or multiple files the easy way with FormData](https://www.freecodecamp.org/news/formdata-explained/)). I found these resources very helpful but they did not solve my problem completely, although they helped me reach a solution.

## The problem statement
The task had a pretty straight-forward requirement.
- User should be able to upload multiple images.
- User should be able to view the images they uploaded.
- User should be able to delete multiple uploaded images.

So basically, it is CRUD for images (without the **U** part, so should it be CRD?). For this post, I won't go into details of backend implementation, the read and delete parts, as I had no major issue implementing them. The thing I found interesting was the creation/upload part.

## Generic first steps
I must say that the requirement was stated in very simple words, **User should be able to upload multiple images**. When we hear file uploads, the first thing that comes to mind is the `<input type="file" />` tag.

### The `<input type="file" />` tag
The input tag with file type is used to open a file browser window in which you can select file/files you want to upload. This is the primary requirement for file uploads. This tag can have more attributes to control it's behavior. Following are the attributes that I used.

- **multiple: "true"**: This lets us upload multiple files at once.
- **accept: "image/*"**: This restricts the type of files to images only.

So my input tag looked like this:
```html
<input type="file" accept="image/*" multiple="true">
```

### UX perspective
From a user's point of view, whenever I want to upload file/files, I should know what images I have uploaded. A preview of the uploaded images is the best way to achieve this. Luckily, there were abundant resources, and I ended up using the following:

```html
<!-- The html is something like -->
<input type="file" accept="image/*" multiple="true" (change)="onFileChange($event)">
```
```typescript
// The component.ts file
onFileChange(event): void {
    const reader = new FileReader();
    reader.onload = (readerEvent: any) => {
        const content = readerEvent.target.result;
        // Do something with the content, use in src of an img
    };
    reader.readAsDataURL(event.target.files[0]);
}
```

For multiple files, this will be:
```typescript
for (let i = 0; i < event.target.files.length; i++) {
    const reader = new FileReader();
    const currentFile = event.target.files[i];

    reader.onload = (readerEvent: any) => {
        const content = readerEvent.target.result;
        // Using the content
    };

    reader.readAsDataURL(currentFile)
}
```

Now what if I don't like one of the images I selected, or what if I wanted to add another image to the queue of images I selected prior? One can say these cases need no attention as the requirement doesn't state these, but from an end-user's perspective, I would want these features as a bare minimum. And once you think about it, you can see that you cannot achieve this by just using the above snippets.

## The hurdle
Had I not thought of the UX and cared only about completing the requirements, my task would be over in 1 hour and I would have had more sleep, but alas. Jotting down the points we want to achieve:

- Have the capability to add one or more files to the upload queue.
- Have the capability to remove one or more files from the upload queue.

So what's stopping us? The answer is `input` tag. The `input` tag can neither add more files in the list of selected files, nor remove them. So how will we achieve the above improvements? 

## The approach
Let's take baby steps and work out one problem at a time. We will select the first one first.

### Add one or more files to the upload queue
As we have seen, the `input` tag cannot add files to the queue. Let's say I select 2 images, `img1` and `img2`. Now I want to add another image `img3` to my queue. If I select the image by clicking on the `input` tag and selecting my file, I see that now I only have `img3`. The other two are gone. 

This is frustrating because if I had 10+ images, not in any order, and if I wanted to add one more, I had to add all 11 of them again (10 from earlier and 1 that I wish to add to the list).

We can see that the `event.target.files` which is the `FileList` cannot keep track of the earlier uploaded files. So why not keep track of them using an array. So I changed my code to store the files in an array.

```typescript
this.images = [];
...
for (let i = 0; i < event.target.files.length; i++) {
    const reader = new FileReader();
    const currentFile = event.target.files[i];

    reader.onload = (readerEvent: any) => {
        const content = readerEvent.target.result;
        this.images.push({
            id: Date.now(),
            src: content,
            file: currentFile
        });
    };

    reader.readAsDataURL(currentFile)
}
```
Now my `images` array has the list of files I upload, along with properties `id` to uniquely identify them, and `src` which has their content (used to display the preview by looping through the images array). And now I can just upload more images and they get appended to the `images` array.

### Deleting one or more files
Now that we have the array, we can delete the images by splicing it. Following is my code for Angular, which can be modified to use in vanilla javascript as well.

```html
<!-- image.component.html -->
<div *ngFor='let image of images; let index = i'>
    <img [src]="image.src">
    <i class="remove-button" (click)="removeImage(image.id)"></i>
</div>
```
```typescript
// image.component.ts
removeImage(id: number): void {
    const index = this.images.findWhere(image => image.id === id);
    this.images.splice(index, 1);
}
```

## So is it over yet 🙄?
Since we have achieved the desired, is it over? Well, no. An issue with this approach is that if I upload an image, say `img1` and then delete it, then we think that it has been deleted, but in reality, it is still present in `event.target.files`. And so, if I try to upload `img1` again, it does nothing, because there is no change in file and so our function does not trigger.

The approach that I used might not be an optimal one, and I welcome any suggestions/feedback on it. The issue is the `FileList` of the `input` tag. So after each upload, I just reset it using `this.imageForm.reset()` where `this.imageForm` is my [Reactive Form](https://angular.io/guide/reactive-forms). The files are already in the array, and since the input has no files, if I try to remove a file and upload it again, it works.

One may say "What if I upload the same image again without deleting the first one? Wouldn't that make two copies of the same file to be uploaded?" And I don't think that's a problem. Again, if you disagree, I would love to hear your points.

And so I achieved my "Multiple upload, multiple delete" for images. I hope this helps someone who has similar requirements 😁😁.