File upload with angualr2

Connecting to File Storage
1

does anybody know how to upload file to local storage using angualr2 ?

2

@Vinod_Hum check this out: http://valor-software.com/ng2-file-upload/

3

tried it, its not working
did it work for you ?

4

getting this error
XMLHttpRequest cannot load http://192.168.1.9:8080/api/v2/files/images. Response to preflight request doesn’t pass access control check: Credentials flag is ‘true’, but the ‘Access-Control-Allow-Credentials’ header is ‘’. It must be ‘true’ to allow credentials. Origin ‘http://192.168.1.9:8100’ is therefore not allowed access.

1 Like
5

finally after 2 days I was able to figure out upload with angualr 2 :slight_smile:
I am not pro programmer so feel free it improve the code below

`uploadImage(file : any,name : string){ 
      return new Promise((resolve, reject) => {
			console.log(file);
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange =  () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        resolve(JSON.parse(xhr.response));
                    } else {
                        reject(xhr.response);
                    }
                }
            }
		
     const URL = `${constants.DSP_INSTANCE_URL}files/images/`;
        xhr.open("POST", URL+name, true);
        let token = localStorage.getItem('session_token');
        xhr.setRequestHeader('X-Dreamfactory-API-Key' ,constants.DSP_API_KEY);
        xhr.setRequestHeader('X-Dreamfactory-Session-Token', token);
        xhr.setRequestHeader('Content-Type', file.type);
        xhr.send(file);
  });

}`

2 Likes
6

do you have a github with the df file upload working? I am struggling with mine still.

7

nop i don’t have any GitHub and here is easy and better option using http module
which uses base64 and save its in folder

//upload function
uploadImage (data : any) {
    return this.http.post(`http://${serverIP}/api/v2/files/images/`, 
            JSON.stringify({resource : [data] }))
                .map((data) => {
                    return data;
                });
     }
     
     
 onChange(files : any){
 // calling upload function 
 let base64 = this.getBase64(files[0])
 let src = base64.replace("data:image/jpeg;base64,",'');
 let name = `whateverName.jpg`
 let data = {
                "name": name,
                "type": "file",
                "is_base64": true,
                "content": src
            }
 this.uploadImage(data).subscribe(
                data => console.log(data),
                error => console.log(error)
       )
 }
 
 //convert to base64
 getBase64(file){
    var reader  = new FileReader();
    reader.addEventListener("load", function (event ) {
        return  event.target.result;
    }, false);
    if (file) {
        reader.readAsDataURL(file);
    }
  
 }
 
 <input type="file" #image onchange="onChange(image.files)" />

this will save whateverName.jpg in /files/images/

source https://wiki.dreamfactory.com/DreamFactory/Tutorials/Uploading_File

hope this help

1 Like
8

Awesome, thank you so much!

2 Likes