File upload doesn't work - AngularJS and PHP

Question

I'm using angularJS and PHP to upload file. From angularJS part I'm sending a blob url like this:

{
    $ngfBlobUrl: "blob:http://test.dev/91458ff7-fc18-4bbc-8dae-f06941e0a1c9"
    selectedCategory: "1",
    name: "some_file_name.pdf"
}

and on PHP side I'm trying to get file from blob url and save it on local storage.

Here is my code on server side:

$blob   = $file['$ngfBlobUrl'];
$f_name = $file['name'];
$filename = uniqid() . '_' .$f_name; // generate unique file name

if(@file_put_contents($destination.'/'.$filename, @file_get_contents($blob)))
{
    // do something!
}

file_get_contents() function is returning failed to open stream: Invalid argument. When I put in browser that URL the pdf file is loading correctly.

Does anyone have an idea how to fix this or to use another way to read file from specified blob url.

Thanks in advance!

$file = $request->documents; I'm using laravel and Request object to read json. — Heril Muratovic
– Heril Muratovic, Commented Jul 14, 2017 at 10:56

Tim Andrews · Accepted Answer · 2017-07-14 14:03:54Z

1

Blob URL's are only a temporary URL and no longer exist when you close the tab. They only exist in the space of the browser you're using and cannot be accessed from your server.

Instead of passing the URL to your server you need to pass the actual file data. First you need to get the data from the blob URL like so:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'YOUR BLOB URL HERE');
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var blobFileData = this.response; //This has the actual data 
    //now send to server (code below)
    uploadFile(blobFileData);
  }
};
xhr.send();

Then upload the blob data to server:

function uploadFile(blobFileData){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "YOUR SERVER URL HERE");
    var formdata = new FormData();
    formdata.append("thefile", blobFileData, "YOUR FILE NAME HERE");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //success
        }
    }
    xhr.send(formdata);
}

Now you can read the data like a normal form $_POST['thefile'] and $_FILES['thefile']

answered Jul 14, 2017 at 14:03

Tim Andrews

8471 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Heril Muratovic Over a year ago

That have sense... Thank you.

cweiske · Accepted Answer · 2017-07-14 10:59:03Z

0

PHP does not know how to work with blob: URLs. You need to strip that from the $blob:

$realBlobUrl = substr($blob, 5);

and fetch that one.

answered Jul 14, 2017 at 10:59

cweiske

31.4k15 gold badges150 silver badges206 bronze badges

2 Comments

Heril Muratovic Over a year ago

When I use your code I'm getting:{"error":"file_get_contents(http:\/\/test.dev\/91458ff7-fc18-4bbc-8dae-f06941e0a1c9): failed to open stream: HTTP request failed! HTTP\/1.0 404 Not Found\r\n"}

Heril Muratovic Over a year ago

do you have another solution?

Collectives™ on Stack Overflow

File upload doesn't work - AngularJS and PHP

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related