Store file to MinIO from browser form (Angular2)

Question

I'm doing a prototype of an Angular8 app that can upload files from a form to MinIO. Here is the form :

upload-form.component.html :

<input class="form-control" type="file" (change)="onFileChanged($event)" required />
<button mat-flat-button color="primary" class="flex__item--middle u-1/3 u-mt+" type="sumbit">
    Upload
</button>

Here is the ts :

upload-form.component.ts

onFileChanged(event) {
    let reader = new FileReader();
    if(event.target.files && event.target.files.length) {
      const [file] = event.target.files;

      this.uploadForm.patchValue({
        fileName: file.name,
        fileSize: file.size
      });

      
    
      reader.onload = () => {
        this.uploadForm.patchValue({
          fileStream: reader.result
        });
        reader.readAsDataURL(file);
      };
    }
  }
  
  // ... here is the service call 
  // this.uploadService.sendMinIO(form_values).then(...

and here is the API call to MinIO putObject function :

minioClient.putObject(bucketName, fileName, fileStream, fileSize, function (err, etag).

The Angular service is not relevant since it just pass the data unchanged.

With this method, the file is created and stored but the content is the base64 encoded string I got from the FileReader. I tried several method in order to get the file content.

MinIO wait for a "stream" (Readable Stream) so i tried to use Buffer (new Buffer(string, "base64")...., or streamifier and other tricks but I think there is something basic I don't understand here.

What do I have to do to store the data coming from Angular into the initial file in MinIO ?

score 1 · Answer 1 · answered Feb 18 '20 at 12:50

You should remove the headers added in the base64 encoded string by readAsDataURL (check the note in the API docs) in the server. For example:

const { file } = req.body; // the base64 encoded string
const buffer = Buffer.from(file.replace(/^data:image\/\w+;base64,/, ""),'base64');

if the file is an image (png, jpeg) or:

const buffer = Buffer.from(file.replace(/^data:application\/pdf;base64,/, ""),'base64');

if the file is a pdf document and then add it in the bucket:

minioClient.putObject('bucket', 'filename', buffer)

Store file to MinIO from browser form (Angular2)

1 Answers1