I have 4 files to upload and i need to append all by name. When i try like that i get an empty array in php.
function AjaxFileUpload() {
**var fileInput = document.getElementsByName("img");
var file = fileInput.files[0];**
var fd = new FormData();
fd.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'abc.php');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
alert('success');
}
else if (uploadResult == 'success')
alert('error');
};
xhr.send(fd);
}
Maybe change var file = fileInput.files[0]; to var file = fileInput[0];, but I'm not sure.
Related
function authenticate(){
var email = 'john.doe#gmail.com';
var password = '123&567';
var ajaxRequest;
credentials = "cmd=login&email="+email+"&password="+password;
var ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
ajaxRequest.open('POST', 'http://xx', true);
ajaxRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
ajaxRequest.send(credentials);
return false;
}
After calling the function the result is like:
cmd=login&email="+"john.doe#gmail.com"+"&password="+"123&567";
You could use the function encodeURIComponent to encode your password :
var email = 'john.doe#gmail.com';
var password = '123&567';
var ajaxRequest;
credentials = "cmd=login&email="+email+"&password="+encodeURIComponent(password);
console.log(credentials);
/* ... */
In your PHP, you can use urldecode to decode it.
Can someone help me.
I've implemented a file upload / download in UI5 that seems to work but when I download the file it gets corrupted and I can't open it.
For now I'm only testing with image files:
new sap.ui.unified.FileUploader({
buttonOnly: true,
buttonText: "Upload files",
icon: "sap-icon://upload",
change: function(oEvent) {
var oFileUploader = oEvent.getSource();
oItem = oFileUploader.getParent().getParent().getParent();
var sPath = oItem.getBindingContext().getPath();
var files = oEvent.getParameter("files");
var file = files[0];
if (file) {
var oNewFile = {
ID: that.count++,
SurveyAnswerID: oSA.ID,
FileName: oEvent.getParameter("newValue"),
FileBinary: null,
MimeType: "image/jpeg",
Mode: "POST"
};
var reader = new FileReader();
reader.onload = function(evt) {
var binaryString = evt.target.result;
oNewFile.FileBinary = binaryString;
};
reader.readAsBinaryString(file);
} else {
oNewFile.FileBinary = "";
oNewFile.FileName = "";
MessageToast.show("Something went wrong with the file upload.\n Please try again");
}
that._pushItemToFileUploadModel(oNewFile.ID, oNewFile);
that._getFileUploadModel().refresh();
}
})
Download code:
selectionChange: function(oEvent) {
var item = oEvent.getSource().getSelectedItem();
var model = that._getFileUploadModel();
if (item) {
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([item.getDocumentId()], {
type: item.getMimeType()
}));
a.download = item.getFileName();
// Append anchor to body.
document.body.appendChild(a);
a.click();
// Remove anchor from body
document.body.removeChild(a);
}
try {
oEvent.getSource()._oList.removeSelections();
} catch (e) {
//DO nothing
}
},
What an I doing wrong here?
I solved my issue converting the file this way:
var u8_2 = new Uint8Array(atob(data).split("").map(function(c) {
return c.charCodeAt(0);
}));
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([u8_2], {
type: item.getMimeType()
}));
I am developing my mobile application using ionic framework and I want it to connect to my API through ajax. Currenty, in the mobile side, which is I am using Ionic Framework, I want to upload an image and pass it to my api through ajax. I am using Cordova for the upload but it seems it doesn't found the URL I indicated.
Here's the HTML
<ion-footer-bar class="bar bar-positive">
<div class="button-bar">
<button class="button icon-left ion-upload" ng-click="uploadImage()" ng-disabled="image === null">Upload</button>
</div>
</ion-footer-bar>
Here's the uploadImage() function in the controller (Just copied the code in a site. Forgot where) EDIT: added targetPath
$scope.uploadImage = function() {
// Destination URL
var url = "http://192.168.0.19/identificare_api/public/api/plants/image";
var targetPath = $scope.pathForImage($scope.image);
// File name only
var filename = $scope.image;
var options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "multipart/form-data",
params : {'fileName': filename}
};
$cordovaFileTransfer.upload(url, targetPath, options).then(function(result) {
var jsonparse = JSON.parse(result);
$scope.showAlert(jsonparse);
}
But in the upload part, I want to do it in ajax to indicate the method for the URL but the problem I don't know what put in data.
$.ajax({
url: "http://192.168.0.19/identificare_api/public/api/plants/image",
type: 'POST',
data:
success:function(json){
var jsonparse = JSON.parse(json);
alert(jsonparse);
},
error:function(){
alert("Error");
}
});
Can someone help me with this issue?
UPDATE: Applied here #Blauharley's comment below
I had another issue here. I returned the $_FILES['image']['tmp_name'] in the API side but it returns nothing but when I returned the $_FILES['image']['name'], it returned my_image.jpg. Why it doesn't have tmp_name?
$scope.uploadImage = function() {
// File for Upload
var targetPath = $scope.pathForImage($scope.image);
$scope.getBase64ImageByURL(targetPath).then(function(base64Image){
var blob = $scope.base64ToBlob(base64Image,'image/jpeg');
var fd = new FormData();
fd.append('image', blob, "my_image.jpg");
fd.append('user_token', "rLUrh37rfTozuBxmemHtlKMgH");
$.ajax({
url: 'http://192.168.0.19/identificare_api/public/api/plants/image',
type: 'POST',
data: fd,
contentType: false,
processData: false,
success:function(res){
alert(res);
},
error:function(err){
alert("Something's wrong with your api. Come on fix it!");
}
});
});
};
$scope.getBase64ImageByURL = function(url) {
var dfd = new $.Deferred();
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
dfd.resolve(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
return dfd.promise();
};
$scope.base64ToBlob = function(base64Image,toMimeType) {
var byteCharacters = atob(base64Image.replace('data:'+toMimeType+';base64,',''));
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], {
type: toMimeType
});
return blob;
};
ADDED: API side
public function image(){
echo json_encode($_FILES['image']['tmp_name']);
}
Using MVC 4.0, I have used the following code to create a download files from the server from an ajax source (using the latest firefox):
This works fine if the output involves are textual files such as csv or txt files, however, when it comes to files like zip or xlsx, it seems the downloaded file is different from the original source (i.e. the zip generated within the server are 15K, but the one downloaded are 26K)
I have been struggling for a few days, can I ask if anyone should shred some light on why it will works for csv/text files, but not for zip or xlsx files?
Many thanks
Controller:
Public Function download(dataIn As myObject) As ActionResult
'some processing
'generated zip files and return with the full path
Dim zipFullPath = generateFiles(dataIn)
Response.Clear()
Response.ContentType = "application/zip"
Response.AddHeader("Content-Disposition", "attachment; filename=Out.zip")
Dim fileLength = New IO.FileInfo(zipFullPath).Length
'fileLength reads about 15K of data
Response.AddHeader("Content-Length", fileLength)
Response.TransmitFile(zipFullPath)
Response.End()
Return View()
End Function
JavaScript:
$.ajax({
type: "POST",
url: "reports/download",
data: jData,
contentType: "application/json; charset=utf-8",
success: function(response, status, xhr) {
// check for a filename
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
var type = xhr.getResponseHeader('Content-Type');
var blob = new Blob([response], { type: type });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
if (filename) {
// use HTML5 a[download] attribute to specify filename
var a = document.createElement("a");
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
//Here is the problem, the original is about 15k,
// but the download file is about 26K
}
} else {
window.location = downloadUrl;
}
setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
}
},
error: function (data) {
alert('Error');
}
});
Currently jQuery ajax can only process text responses, that's why your text files work but your binary files fail.
To download a non text file from ajax use the XMLHttpRequest object and specify a responseType, for instance blob or arraybuffer.
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
...
var blob = this.response; //save the blob as usual
...
}
}
xhr.open('POST', 'reports/download');
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhr.responseType = 'blob'; // the response will be a blob and not text
xhr.send(jData);
I have a code that works well for sending multiple files via ajax with FormData and XMLHttpRequest;
for (var i=0, j=this.files.length; i<j; i++) {
file = this.files[i];
var formdata = new FormData();
formdata.append("images[]", file);
var xhr = new XMLHttpRequest(),
upload = xhr.upload,
id = Math.floor((Math.random() * 100000));
upload.addEventListener("loadstart", function(e){
showUploadedItem(file, this.id);
});
upload.id = id;
upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
)
};
upload.onload = function(e) {
if (this.status == 200) {
console.log('');
}
};
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log('');
}
};
xhr.open('post', '<?php echo Yii::app()->createUrl('url') ?>', true);
xhr.send(formdata);
}
I am sending each file as a new XMLHttpRequest object inside the loop, so I do not know when I'm getting all requests ending.
Can anyone help?
Take a look at the documentation for XMLHttpRequest.
There are a couple of options that I can think of. You could use the "loadend" callback for each of them and increment a variable outside of the loop and check for the total amount of requests that were sent in each one. Once the count reaches the total number of requests, you could perform any logic or call a function that would want to call.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest%2FUsing_XMLHttpRequest
Otherwise, setting the async parameter to false would work as well, but then you take a performance hit waiting for each one to finish before starting the others.
Based on your answer, my solution;
var x = 0;
var lenght = this.files.length;
for (var i=0, j=lenght; i<j; i++) {
// code here
var xhr = new XMLHttpRequest(),
// code here
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState && this.status == 200 ) {
x++;
if(x == lenght) {
window.setTimeout( function(){
alert('finish');
}, 1000 );
}
}
};
// code here
}
Though it is a trivial function, it works.