Upload images to the Server with ionic 5

https://youtu.be/zxOp3D1i9Dc

hello today in this article i will be showing you how to upload images from ionic application to any Cloud service out there…

but before we continue.. this Tutorial is a continuation of the previous video which you can find here.

from the previous tutorials we can now add two functions to adding our images to server. and in this article i will be working with UPLOADCARE to upload our images.

the first function/ block of code will be responsible for accessing our File Url from the Device Storage Directory by resolving the File system url

getimagefile(imageurl){

const file = this.file.resolveLocalFilesystemUrl(imageurl).then((entry: FileEntry)=>{

entry.file((file)=>{

console.log(‘return entry File:’, file.name);

}, error=>{

console.log(‘error accessing the image entry files’, error);

});

});

}

after that then we call this function in our previously created ImageCrop function and pass in the cropped image Url response like so.

then we now create here our last function to convert our entry image content into a blob content which we can then upload.

first we define to two data variables :

1 FormData Object to hold our blob Data and other api keys that we will need to send:

FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest:

Here we will build a FormData object by instantiating it and then appending fields to it by calling its append() method

var formData = new FormData();

2 The FileReader object to store our image data using the Blob objects which we can then append to our formData object to be sent.

FileReader() object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read

const read = new FileReader();
read.onload = () =>{
    console.log(evt.target.result);
  };
  read.readAsText(file);

Here we can now add data to our Formdata object like so:

uploadimageFiletoServer(file){

const formdata = new FormData();

const read = new FileReader();

read.onload = () => {

const blob = new Blob([read.result],{

type: file.type

});

formdata.append(‘UPLOADCARE_PUB_KEY’,’ff144b94384588a4bceb’);

formdata.append(‘UPLOADCARE_STORE’,’1');

formdata.append(‘name’,’ImageUpload’);

formdata.append(‘file’,blob,file.name);

After appeding our data then we can call the post method request with http

this.http.post(‘https://upload.uploadcare.com/base/',formdata).subscribe((response) =>{

const jsonobject = response.json();

console.log(‘UPloadCare Response’, jsonobject.file);

});

so now our function will look like so:

then we can pass/call our upload image function in the previous get image Function like so:

and that concludes our image Upload tutorial..

you can find the source code Here :

https://bit.ly/3zHtECG

Thanks for reading this Article