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?

Improve this question
3
  • 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 Commented Jan 16, 2017 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? Commented Jan 16, 2017 at 13:07
  • Look at SO: Enable CORS with wamp on windows 8. If that doesn't help, it would be best to ask as a separate question. Commented Jan 17, 2017 at 11:44

2 Answers 2

Reset to default
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.

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

6 Comments

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
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 can help.
but now it gives an other error which is: XMLHttpRequest cannot load localhost/mecenazgos/1. Response for preflight is invalid (redirect)
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.
i don't understand what do you mean by : "OPTIONS request with a 3xx status for this endpoint."
|
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:

Improve this answer

6 Comments

ok so i should use $http with this configuration instead of XMLHttpRequest?
this one does not work it gives me the error: XMLHttpRequest cannot load localhost/mecenazgos/1. Redirect from 'localhost/mecenazgos/1' to 'localhost/mecenazgos/1' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080' is therefore not allowed access.
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).
yes i see , now how to solve th CORS problem i tried many configs in wamp server
and what's the difference between using $http and XMLHttpRequest? which one is better and why?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.