0

How can I upload a file from local to local URL?

$scope.files = []; 
$scope.uploadFile = function() {
var fd = new FormData()
for (var i in $scope.files) {
    fd.append("fileToUpload", $scope.files[i]);
}

var urlDir = "http://localhost/mecenazgos/";
//Upload the files
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", urlDir);
scope.progressVisible = true;
xhr.send(fd);

I have installed wamp server to use it in the url, but it gives me an error: enter image description here

any ideas plz?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Smahane
  • 175
  • 1
  • 5
  • 13
  • You can't. Install a local http server (IIS/Apache/and other) and write a script that handle the file upload. There are tons of tutorials about it out there – Alon Eitan Jan 16 '17 at 12:23
  • @AlonEitan thank you so much no i've intslled wamp but it gives me an error check my updated post ... any idea? – Smahane Jan 16 '17 at 13:07
  • Look at [SO: Enable CORS with wamp on windows 8](http://stackoverflow.com/questions/27058104/enable-cors-with-wamp-on-windows-8). If that doesn't help, it would be best to ask as a separate question. – georgeawg Jan 17 '17 at 11:44

2 Answers2

1

This is a CORS issue - you're serving your script from localhost, but likely via different port. In order to succeed, the POST request URL must match the origin you're serving from, including port. You'll have to configure your server to return the appropriate access control headers, e.g. Access-Control-Allow-Origin: http://localhost:3000 if you're serving your client scripts from this origin.

petkov.np
  • 511
  • 3
  • 4
  • thank you so much for your respons ... first of all i have my app lunched as java application in the 8080 port so no server here ... i needed the web server just to use its url where to upload files so i used wampserver which uses the port 80 – Smahane Jan 16 '17 at 14:21
  • So the server you're uploading listens on port 80, but you're making a request from a script coming from :8080. You must configure your server to respond with the following header (as a minimum): `Access-Control-Allow-Origin: http://localhost:8080`. I'm not familiar with wamp, so I can't give you exact instructions how to enable CORS headers, maybe [this one](http://stackoverflow.com/questions/27058104/enable-cors-with-wamp-on-windows-8) can help. – petkov.np Jan 16 '17 at 14:31
  • but now it gives an other error which is: XMLHttpRequest cannot load http://localhost/mecenazgos/1. Response for preflight is invalid (redirect) – Smahane Jan 16 '17 at 14:39
  • This means that your server responded to the `OPTIONS` request with a `3xx` status for this endpoint. Ideally, the response code should be 204 No Content with the access control header set. There are a lot of reasons why this could happen, e.g. authentication. It depends on the way you have implemented your endpoint - there's probably a condition that forces a redirect. – petkov.np Jan 16 '17 at 14:59
  • i don't understand what do you mean by : "OPTIONS request with a 3xx status for this endpoint." – Smahane Jan 16 '17 at 15:10
  • Unlike simple requests, "preflighted" requests first send an HTTP request by the [OPTIONS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS) method to the resource on the other domain, in order to determine whether the actual request is safe to send. See [MDN Web API Reference - HTTP access control CORS Pre-flight Requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests) – georgeawg Jan 17 '17 at 00:25
0

How to POST FormData Using the $http Service

When using the FormData API to POST files and data, it is important to set the Content-Type header to undefined.

var fd = new FormData()
for (var i in $scope.files) {
    fd.append("fileToUpload", $scope.files[i]);
}
var config = {headers: {'Content-Type': undefined}};

var httpPromise = $http.post(url, fd, config);

By default the AngularJS framework uses content type application/json. By setting Content-Type: undefined, the AngularJS framework omits the content type header allowing the XHR API to set the content type. When sending a FormData object, the XHR API sets the content type to multipart/form-data with the proper boundaries and base64 encoding.

For more information, see MDN Web API Reference - XHR Send method

what's the difference between using $http and XMLHttpRequest? which one is better and why?

The $http Service is the AngularJS wrapper for the XMLHttpRequest (XHR) API. It converts the callback based asynchronous API to a $q service promise based API. It is integrated with the AngularJS framework and its digest cycle.

If the app is using the AngularJS framework to render the model, it should be using the AngularJS framework to communicate with the server.

Angular frees you from the following pains:

  • Registering callbacks: Registering callbacks clutters your code, making it hard to see the forest for the trees. Removing common boilerplate code such as callbacks is a good thing. It vastly reduces the amount of JavaScript coding you have to do, and it makes it easier to see what your application does.

  • Manipulating HTML DOM programmatically

  • Marshaling data to and from the UI
  • Writing tons of initialization code just to get started

For more information, see:

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • ok so i should use $http with this configuration instead of XMLHttpRequest? – Smahane Jan 17 '17 at 08:34
  • this one does not work it gives me the error: XMLHttpRequest cannot load http://www.localhost/mecenazgos/1. Redirect from 'http://www.localhost/mecenazgos/1' to 'http://www.localhost/mecenazgos/1/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. – Smahane Jan 17 '17 at 09:40
  • 1
    It will work after you solve the CORS issue. Under the hood the $http service uses the XMLHttpRequest (XHR) API. For more information on CORS, see [MDN Web Technology Guide - HTTP access control (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). – georgeawg Jan 17 '17 at 11:09
  • yes i see , now how to solve th CORS problem i tried many configs in wamp server – Smahane Jan 17 '17 at 11:38
  • and what's the difference between using $http and XMLHttpRequest? which one is better and why? – Smahane Jan 17 '17 at 11:40
  • Look at [SO: Enable CORS with wamp on windows 8](http://stackoverflow.com/questions/27058104/enable-cors-with-wamp-on-windows-8). If that doesn't help, it would be best to ask as a separate question. – georgeawg Jan 17 '17 at 11:44