# File Upload with ajax/javascript

**URL:** <https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783>\
**Category:** Connecting to File Storage\
**Created:** [January 23, 2015, 11:51pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783 "2015-01-23T23:51:21Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 23, 2015, 11:51pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/1 "2015-01-23T23:51:21Z")

</div>

I’m desperate for some help with uploading files. I created a Remote File Storage service to an Azure drive, from which I can successfully retrieve files.

I’m using a javascript library called Simple Ajax Uploader for my uploads. I was using it with a php handler successfully before.

I’ve looked at the few posts in this forum on file uploads, but to no avail.

I am also using the dreamfactory javascript sdk by jsykes for the rest of my app. So I’m happy for a solution that uses that or directly calls a url with ajax.

My best guess so far is this:

```
var fileName = $('#file').val();
var uploader = new ss.SimpleUpload({
      button: upButtons,
      url: 'http://myServer.cloudapp.net/rest/myFileService/myContainer/' + fileName + '?app_name=myAppName',
      name: 'uploadFile',
      cors: true,                  
      responseType: 'json',
      multipart: true,
      onSubmit: function(filename, extension) {
        ... stuff ...
      },
      onComplete: function(file, response) {
        ... stuff ...
      }
});

```

The result of which is a cors error, which I’ve come to realize with DreamFactory usually means there’s some non-cors error happening - I have cors turned on and it works correctly otherwise.

Any input or examples would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 24, 2015, 12:58am UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/2 "2015-01-24T00:58:25Z")

</div>

The other method I’ve tried is this:

```
var file = $("#file")[0].files[0];
console.log(file);
$.ajax({
    beforeSend: function(request) {
        request.setRequestHeader("X-File-Name", file.name);
        request.setRequestHeader("Content-Type", file.type);
        //request.setRequestHeader("Access-Control-Allow-Origin", "*")
    },
    type: 'POST',
    url: 'http://myServer.cloudapp.net/rest/myFileService/myContainer/' + file.name + '?app_name=myAppName',
    data: file,
    cache: false,
    processData: false
});

```

But I still get a cors error.

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 24, 2015, 3:54am UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/3 "2015-01-24T03:54:25Z")

</div>

Well, the cors issue was related to the header X-File-Name it seems.

I’m working with two code snippets now, and both return a 400 Bad Request error: “The requested URI does not represent any resource on the server.” I abandoned the upload library for now, just trying to get a working upload first.

WITH jsykes sdk:

```
function uploadFile() {
    var file = $("#file")[0].files[0];
    df.azurefiles.createFile({
        "container": "azurefiles",
        "file_path": file.name,
        "body": file
    });
};

```

WITHOUT sdk:

```
function uploadFile() {
    var file = $("#file")[0].files[0];
    $.ajax({
        beforeSend: function(request) {
            request.setRequestHeader("Content-Type", file.type);
            request.setRequestHeader("X-DREAMFACTORY-SESSION-TOKEN", sessionStorage.SESSION_TOKEN);
        },
        type: 'POST',
        url: 'http://myServer.cloudapp.net/rest/azurefiles/azurefiles/' + file.name + '?app_name=myAppName',
        data: file,
        cache: false,
        processData: false
    });
};
```

---

<div class="post-metadata">

**Author:** ![michaelmandato](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/michaelmandato/32/90_2.png) [@michaelmandato](https://community.dreamfactory.com/u/michaelmandato)\
**Post date:** [January 26, 2015, 5:06pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/4 "2015-01-26T17:06:44Z")

</div>

Hey Erik,

I need a few details about your files service. It seems as though you have a service called ‘azurefiles’ as well as a container called ‘azurefiles’. Is this correct?

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 26, 2015, 8:54pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/5 "2015-01-26T20:54:08Z")

</div>

That’s exactly right.

---

<div class="post-metadata">

**Author:** ![michaelmandato](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/michaelmandato/32/90_2.png) [@michaelmandato](https://community.dreamfactory.com/u/michaelmandato)\
**Post date:** [January 26, 2015, 9:22pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/6 "2015-01-26T21:22:27Z")

</div>

Good stuff. I just want to eliminate the easy things first. Go to api docs in that admin and click on your azurefiles service When it opens there should be three ‘GET’ rows at the top. The third of which will return all containers. If you click and open that option there will be a ‘Try it’ button at the bottom of the panel. When you click the ‘Try it’ button…what is the result?

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 26, 2015, 9:26pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/7 "2015-01-26T21:26:07Z")

</div>

```
{
  "container": [
    {
      "name": "azurefiles",
      "path": "azurefiles",
      "last_modified": "Wed, 14 Jan 2015 21:06:00 GMT",
      "access": [
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "MERGE",
        "DELETE",
        "ADMIN"
      ]
    },
    {
      "name": "vhds",
      "path": "vhds",
      "last_modified": "Mon, 05 Jan 2015 22:44:24 GMT",
      "access": [
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "MERGE",
        "DELETE",
        "ADMIN"
      ]
    }
  ]
}
```

---

<div class="post-metadata">

**Author:** ![michaelmandato](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/michaelmandato/32/90_2.png) [@michaelmandato](https://community.dreamfactory.com/u/michaelmandato)\
**Post date:** [January 26, 2015, 9:31pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/8 "2015-01-26T21:31:26Z")

</div>

Looks good. Scroll down in the api docs. Let’s check one more thing just for sanity. There should be another ‘GET’ option…This one should be SERVICE\_NAME/{container}. There will be a container name field in the panel. Fill that in with your ‘azurefiles’ container name. This should return an empty container as nothing has been saved there.

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 26, 2015, 9:47pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/9 "2015-01-26T21:47:49Z")

</div>

Returns the following - I added a test image from the admin filemanager interface:

```
{
  "container": "azurefiles",
  "name": "azurefiles",
  "path": "azurefiles",
  "folder": [],
  "file": [
    {
      "name": "Jellyfish.jpg",
      "last_modified": "Sat, 24 Jan 2015 00:52:39 GMT",
      "content_length": 775702,
      "content_type": "image/jpeg",
      "content_encoding": null,
      "content_language": null,
      "path": "azurefiles/Jellyfish.jpg"
    }
  ]
}
```

---

<div class="post-metadata">

**Author:** ![michaelmandato](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/michaelmandato/32/90_2.png) [@michaelmandato](https://community.dreamfactory.com/u/michaelmandato)\
**Post date:** [January 26, 2015, 9:54pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/10 "2015-01-26T21:54:59Z")

</div>

Alright. Service looks configured correctly. Sorry to take you through that but we needed verification. So we should expect the same behavior from an api call. So lets try this. Create a function that calls the service. Just a simple jQuery GET for the service will do. Something along the lines:

$.get(‘YOUR\_DSP\_URL/rest/azurefiles’, function (data) {console.log(data)})

This will determine if we’re having CORS issues or if the problem lies elsewhere.

---

<div class="post-metadata">

**Author:** ![michaelmandato](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/michaelmandato/32/90_2.png) [@michaelmandato](https://community.dreamfactory.com/u/michaelmandato)\
**Post date:** [January 26, 2015, 10:03pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/11 "2015-01-26T22:03:18Z")

</div>

Also. Rather then trying to post with the file name in the url…Just post to the service/container with the file as the only thing in an array.

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 26, 2015, 11:08pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/12 "2015-01-26T23:08:35Z")

</div>

Ok. I did a simple GET on the service:

```
$.ajax({
    beforeSend: function(request) {
        request.setRequestHeader("X-DREAMFACTORY-SESSION-TOKEN", sessionStorage.SESSION_TOKEN);
    },
    type: 'GET',
    url: 'http://myServer.cloudapp.net/rest/azurefiles/azurefiles/?app_name=myAppName',
}).done(function(data) {
    console.log(data)
});

```

And got a response:

```
{"container":"azurefiles","name":"azurefiles","path":"azurefiles","folder":[],"file":[{"name":"Jellyfish.jpg","last_modified":"Sat, 24 Jan 2015 00:52:39 GMT","content_length":775702,"content_type":"image/jpeg","content_encoding":null,"content_language":null,"path":"azurefiles/Jellyfish.jpg"}]}

```

I also tried the POST without the file name:

```
var file = $("#file")[0].files[0];
$.ajax({
    beforeSend: function(request) {
        request.setRequestHeader("Content-Type", file.type);
        request.setRequestHeader("X-DREAMFACTORY-SESSION-TOKEN", sessionStorage.SESSION_TOKEN);
    },
    type: 'POST',
    url: 'http://myServer.cloudapp.net/rest/azurefiles/azurefiles/?app_name=myAppName',
    data: file,
    cache: false,
    processData: false
});

```

And got the response: 400 Bad Request: Invalid empty path.

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 27, 2015, 6:25pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/13 "2015-01-27T18:25:50Z")

</div>

I finally decided to test a file upload with the local db file service - duh. And it works with the code below:

```
var file = $("#file")[0].files[0];
$.ajax({
    beforeSend: function(request) {
        request.setRequestHeader("Content-Type", file.type);
        request.setRequestHeader("X-DREAMFACTORY-SESSION-TOKEN", sessionStorage.SESSION_TOKEN);
    },
    type: 'POST',
    url: 'http://myServer.cloudapp.net/rest/files/test/' + file.name + '?app_name=myAppName',
    data: file,
    cache: false,
    processData: false
});

```

On googling the 400 Bad Request error: “The requested URI does not represent any resource on the server.”, it looks like this is an Azure specific response. So I guess the issue lies there somewhere.

Is it possible that I need to configure my Azure container differently somehow? I’m able to upload files to it via the DF file manager just fine, but that uses a form post as opposed to ajax. Is it possible I need to edit the azurefiles Service Definition is some way? Or is this just a DF bug that no one else has encountered before?

This is a critical issue for me. Any additional help would be much appreciated.

Thanks!

---

<div class="post-metadata">

**Author:** ![michaelmandato](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/michaelmandato/32/90_2.png) [@michaelmandato](https://community.dreamfactory.com/u/michaelmandato)\
**Post date:** [January 28, 2015, 2:32pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/14 "2015-01-28T14:32:49Z")

</div>

I have alerted the server side guys to the matter. It seems your doing everything correctly on the client side. Someone will reach out to you today.

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 28, 2015, 3:41pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/15 "2015-01-28T15:41:46Z")

</div>

Thank you vary much Michael!

---

<div class="post-metadata">

**Author:** ![toddappleton](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/toddappleton/32/159_2.png) [@toddappleton](https://community.dreamfactory.com/u/toddappleton)\
**Post date:** [January 29, 2015, 10:19pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/16 "2015-01-29T22:19:55Z")

</div>

Instead of including the file name in the URL, put it in a header named X-File-Name. Doing it like that it worked for both Azure and local file storage. I’ve created a bug report for us to investigate why the Azure upload fails when file name is in the URL. It should work both ways.

Add header: request.setRequestHeader(“X-File-Name”, [file.name](http://file.name));  
Remove file name from URL: ‘[http://myServer.cloudapp.net/rest/azurefiles/azurefiles?app\_name=myAppName](http://myServer.cloudapp.net/rest/azurefiles/azurefiles?app_name=myAppName)’

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 30, 2015, 6:17am UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/17 "2015-01-30T06:17:47Z")

</div>

Hi Todd. Thanks for the reply. I added the header and removed the file name from the url, and I’m now getting the CORS error that I was getting originally. This is true for both Azure and local file storage.

“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://…cloudapp.net/rest/azurefiles/azurefiles?app\_name=… This can be fixed by moving the resource to the same domain or enabling CORS.”

---

<div class="post-metadata">

**Author:** ![toddappleton](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/toddappleton/32/159_2.png) [@toddappleton](https://community.dreamfactory.com/u/toddappleton)\
**Post date:** [January 30, 2015, 2:57pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/18 "2015-01-30T14:57:48Z")

</div>

You can add X-File-Name to the list of allowed headers. It’s a file in the DSP server code. Might have to restart apache afterwards, not sure about that. We’re going to add X-File-Name to the next release but you can change it locally for now.

vendor/dreamfactory/lib-php-common-platform/src/Yii/Components/PlatformWebApplication.php

```
const CORS_DEFAULT_ALLOWED_HEADERS = 'X-File-Name,Content-Type,X-Requested-With,X-DreamFactory-Application-Name,X-Application-Name,X-DreamFactory-Session-Token,X-HTTP-Method,X-HTTP-Method-Override,X-METHOD-OVERRIDE';
```

---

<div class="post-metadata">

**Author:** ![erikkurtu](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.dreamfactory.com/erikkurtu/32/212_2.png) [@erikkurtu](https://community.dreamfactory.com/u/erikkurtu)\
**Post date:** [January 30, 2015, 4:56pm UTC](https://community.dreamfactory.com/t/file-upload-with-ajax-javascript/783/19 "2015-01-30T16:56:44Z")

</div>

Hazzaa! That did it. Thanks Todd!

Just a note, I’m using Bitnami, and the file to edit was found here: /opt/bitnami/apps/dreamfactory/htdocs/vendor/dreamfactory/lib-php-common-platform/src/Yii/Components/PlatformWebApplication.php

Thanks again!