I am trying to send file with XMLHttpRequest with this code.
var url= "http://localhost:80/....";
$(document).ready(function(){
document.getElementById('upload').addEventListener('change', function(e) {
var file = this.files[0];
var xhr = new XMLHttpRequest();
xhr.file = file; // not necessary if you create scopes like this
xhr.addEventListener('progress', function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
}, false);
if ( xhr.upload ) {
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
};
}
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(['xhr upload complete', e]);
}
};
xhr.open('post', url, true);
xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.send(file);
}, false);
});
I get this error: T
The request was rejected because no multipart boundary was found.
What am I doing wrong?
There is no such thing as xhr.file = file;; the file object is not supposed to be attached this way.
xhr.send(file) doesn't send the file. You have to use the FormData object to wrap the file into a multipart/form-data post data object:
var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);
After that, the file can be access in $_FILES['thefile'] (if you are using PHP).
Remember, MDC and Mozilla Hack demos are your best friends.
EDIT: The (2) above was incorrect. It does send the file, but it would send it as raw post data. That means you would have to parse it yourself on the server (and it's often not possible, depend on server configuration). Read how to get raw post data in PHP here.
A more extended answer:
let formData = new FormData();
formData.append("fileName", audioBlob);
$.ajax({
"url": "https://myserver.com/upload",
"method": "POST",
"headers": {
"API-Key": "myApiKey",
},
"async": true,
"crossDomain": true,
"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
"data": formData
}).done(function(response){
console.log(response);
});
Related
I have one XMLHttpRequest in javascript which is posting the FormData object to server. This call works fine in Chrome. On Microsoft Edge, I am seeing this error: "SCRIPT0: SCRIPT0: 'FormData' is not defined".
Here is my snippet:
function saveRecording(recordingData, endpoint, token) {
var randomNumber = Math.floor(100000 + Math.random() * 900000);
randomNumber = randomNumber.toString().slice(0, 4);
var recordingName = "Recording " + randomNumber;
var sender = {
sliceNumber: 1,
sliceMaxSize: 1024 * 1024,
sliceStart: 0,
sliceEnd: 1024 * 1024,
total: recordingData.blob.size,
recordlength: recordingData.length.toFixed(2),
fileName: '',
sendSlice: function () {
if (this.total > 0) {
var slice = undefined;
if (this.total >= this.sliceMaxSize) {
this.sliceEnd = this.sliceStart + this.sliceMaxSize;
}
else {
this.sliceEnd = this.sliceStart + this.total;
}
slice = recordingData.blob.slice(this.sliceStart, this.sliceEnd);
var isLastSlice = !((this.total - this.sliceMaxSize) > 0);
console.log(slice);
var formData = new FormData();
formData.append("data", slice);
formData.append("sliceMaxSize", this.sliceMaxSize);
formData.append("sliceNumber", this.sliceNumber);
formData.append("fileName", this.fileName);
formData.append("dictation", JSON.stringify(recordingData.dictation));
formData.append("isLastSlice", isLastSlice);
formData.append("length", this.recordlength);
formData.append("encoding", recordingData.encoding);
formData.append("name", recordingName);
//var params = 'data=ipsum&sliceMaxSize=binny&sliceMaxSize=binny&sliceMaxSize=binny&sliceMaxSize=binny&sliceMaxSize=binny&sliceMaxSize=binny';
var sender_this = this;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
//readyState=4 means request finished and response is ready
if (this.readyState == 4) {
if (this.status == 200) {
//Success
sender_this.fileName = JSON.parse(this.response).fileName;
sender_this.sliceNumber++;
sender_this.sliceStart = sender_this.sliceStart + sender_this.sliceMaxSize;
sender_this.total = sender_this.total - sender_this.sliceMaxSize;
// send the next slice
sender_this.sendSlice();
}
else {
//Fail
self.postMessage({ command: "saveRecordingFail", message: JSON.parse(this.response) });
}
}
};
request.open("POST", endpoint, true);
request.setRequestHeader("Accept", "application/json, text/plain, */*");
//request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.setRequestHeader(token.name, token.value);
request.send(formData);
}
else {
//recording completely sent to server, post message to worker caller
self.postMessage({ command: "saveRecordingSuccess" });
}
}
};
// send the slice
sender.sendSlice();
}
Workaround already tried:
I have already checked that FormData works in edge by manually trying on the edge console which created the FormData object successfully.
FormData working fine in console of edge browser
I tried to make a test with sample code below and find that it is working fine with MS Edge browser (user agent string: IE 11)
<!doctype html>
<script>
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
// List key/value pairs
for(let [name, value] of formData) {
alert(`${name} = ${value}`);
}
</script>
</html>
I suggest you to check all the values that you are trying to append and verify that all are having proper and correct values.
I suggest you to check all the values one by one to find the problematic value.
It may help to narrow down the issue. Than it will be easier for you to fix the issue.
Reference:
FormData
I am unsure how to download objects inside a bucket. The file I am currently able to download has a significantly smaller size compared to the file uploaded in the bucket. In addition, I am unable to open the file after it is downloaded. Is there something missing in my code? The following code is what I used to download files.
var element = document.createElement('a');
element.setAttribute('href', '#');
element.setAttribute('download', node.text);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
You refer my answer here (Download BIM360 Docs file using Javascript) to download files from Forge OSS bucket.
In this suggestion, I extended the jQuery function to creates new XMLHttpRequest and passes all the received data back to the jQuery.
/**
*
* jquery.binarytransport.js
*
* #description. jQuery ajax transport for making binary data type requests.
* #version 1.0
* #author Henry Algus <henryalgus#gmail.com>
*
*/
// use this transport for "binary" data type
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR) {
// check for conditions and support for blob / arraybuffer response type
if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
return {
// create new XMLHttpRequest
send: function(headers, callback) {
// setup all variables
var xhr = new XMLHttpRequest(),
url = options.url,
type = options.type,
async = options.async || true,
// blob or arraybuffer. Default is blob
dataType = options.responseType || "blob",
data = options.data || null,
username = options.username || null,
password = options.password || null;
xhr.addEventListener('load', function() {
var data = {};
data[options.dataType] = xhr.response;
// make callback and send data
callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
});
xhr.open(type, url, async, username, password);
// setup custom headers
for (var i in headers) {
xhr.setRequestHeader(i, headers[i]);
}
xhr.responseType = dataType;
xhr.send(data);
},
abort: function() {
jqXHR.abort();
}
};
}
});
Afterward, you can simply replace values of filename, bucketKey and YOUR_ACCESS_TOKEN to yours to download files on the website directly. However, it could be very unsafe, please see the comment here
$(function() {
$('a#download').click(function(event) {
event.preventDefault();
const filename = 'hose.rvt';
const bucketKey = 'adn-test';
const settings = {
crossDomain: true,
url: 'https://developer.api.autodesk.com/oss/v2/buckets/' + bucketKey + ' /objects/' + filename,
method: 'GET',
dataType: 'binary',
processData: false,
headers: {
Authorization: 'Bearer YOUR_ACCESS_TOKEN',
Content-Type: 'application/octet-stream'
}
};
$.ajax(settings).done(function (blob, textStatus, jqXHR) {
console.log(blob );
console.log(textStatus);
if( navigator.msSaveBlob )
return navigator.msSaveBlob(blob, filename);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style = 'display: none';
document.body.appendChild(a);
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
});
});
})
I have a web api that is returning a JSReport as an encoded byte array. No matter how i try and read the byte array I either get a black screen or an error message that says "failed to download pdf". If I create a hidden anchor tag and download the pdf it works fine. However, I do not want the user to download it, I would prefer they can view it right from their browser.
WEB API CALL
var data = LossReportService.GetLossSummary(request);
var pdf_bytes = LossReportService.GeneratePDFUsingJSReport(data);
byte[] myBinary = new byte[pdf_bytes.Length];
pdf_bytes.Read(myBinary, 0, (int)pdf_bytes.Length);
string base64EncodedPDF = System.Convert.ToBase64String(myBinary);
var response = Request.CreateResponse(HttpStatusCode.OK, base64EncodedPDF);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
response.Content.Headers.ContentLength = pdf_bytes.Length;
return response;
Javascript
$.ajax({
type: "POST",
url: "/Reporting/GetLossSummary",
data: { dataObj },
},
success: function (data) {
if (data != null) {
//I have tried this
var file = new Blob([data], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL, "LossSummaryReport");
//which gives me a "failed to load pdf document" error
//and I have tried this, which just renders a blank page
window.open("data:application/pdf," + encodeURI(data));
}
}
});
Any suggestions would be greatly appreciated.
since you are using jsreport, in a normal case, you can use the jsreport browser sdk to better work with the report result and to easily show it in browser. but in your case, you are using a custom url in your server to render your report, so the jsreport browser sdk can't help you in that case. you need instead to work with the report request and response with either jQuery ajax or plain XMLHttpRequest.
working with blob/binary data is hard to do it with jQuery.ajax, you would need to add a data transport to $.ajax in order to handle binary data
/**
*
* jquery.binarytransport.js
*
* #description. jQuery ajax transport for making binary data type requests.
* #version 1.0
* #author Henry Algus <henryalgus#gmail.com>
*
*/
// use this transport for "binary" data type
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){
// check for conditions and support for blob / arraybuffer response type
if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob)))))
{
return {
// create new XMLHttpRequest
send: function(headers, callback){
// setup all variables
var xhr = new XMLHttpRequest(),
url = options.url,
type = options.type,
async = options.async || true,
// blob or arraybuffer. Default is blob
dataType = options.responseType || "blob",
data = options.data || null,
username = options.username || null,
password = options.password || null;
xhr.addEventListener('load', function(){
var data = {};
data[options.dataType] = xhr.response;
// make callback and send data
callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
});
xhr.open(type, url, async, username, password);
// setup custom headers
for (var i in headers ) {
xhr.setRequestHeader(i, headers[i] );
}
xhr.responseType = dataType;
xhr.send(data);
},
abort: function(){
jqXHR.abort();
}
};
}
});
but when handling blob data in an request/response i prefer doing it with XHTMLRequest directly because it let me manipulate the response in any way i want.
function sendReportRequest (dataObj, cb) {
var xhr = new XMLHttpRequest()
var data = JSON.stringify(dataObj)
xhr.open('POST', 'http://url-of-your-server/' + '/Reporting/GetLossSummary', true)
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8')
xhr.responseType = 'arraybuffer'
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
var response = xhr.response
var contentType = xhr.getResponseHeader('Content-Type')
var dataView = new DataView(response)
var blob
try {
blob = new Blob([dataView], { type: contentType })
cb(null, blob)
} catch (e) {
if (e.name === 'InvalidStateError') {
var byteArray = new Uint8Array(response)
blob = new Blob([byteArray.buffer], { type: contentType })
cb(null, blob)
} else {
cb(new Error('Can not parse buffer response'))
}
}
} else {
var error = new Error('request failed')
error.status = xhr.status
error.statusText = xhr.statusText
cb(error)
}
}
xhr.onerror = function () {
var error = new Error('request failed')
error.status = xhr.status
error.statusText = xhr.statusText
cb(error)
}
xhr.send(data)
}
sendReportRequest(dataObj, function (err, reportBlob) {
if (err) {
return console.error(err)
}
var reportFileUrl = URL.createObjectURL(reportBlob)
window.open(reportFileUrl)
})
with this piece of code you should be able to request a pdf file and show it right in the browser in a new window
I am getting 404 error on my $.ajax request in Google API.
I have these codes,
var asyncLoad = require('react-async-loader');
var CLIENT_ID = '<SOME_ID>';
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
var SCOPES = 'https://www.googleapis.com/auth/drive';
const mapScriptToProps = state => ({
gapi: {
globalPath: 'gapi',
url: 'https://apis.google.com/js/api.js'
}
});
#asyncLoad(mapScriptToProps)
...
I used async loader of react to get the Google API before the bundle.js.
Then I get the gapi in the properties. Here is my next codes for submitting a form.
submitForm(e){
e.preventDefault();
var data = this.refs.file.files[0];
var self = this;
var formData = new FormData();
formData.append('data', data);
$.ajax({
url: "https://www.googleapis.com/upload/drive/v3?uploadType=media&access_token="+encodeURIComponent(self.state.token),
type: "POST",
processData: false,
data: formData,
beforeSend: function (xhr) {
/* Authorization header */
xhr.setRequestHeader("Authorization", "Bearer " + self.state.token);
xhr.setRequestHeader('X-Upload-Content-Length', data.size);
xhr.setRequestHeader("Content-Type", "image/jpeg");
xhr.setRequestHeader('X-Upload-Content-Type', "image/jpeg");
},
success: function(data){
if(typeof data === "string") data = JSON.parse(data);
console.log(data);
if(data.success){
console.log("done");
}else {
console.log("error");
}
}
});
}
So here, I call submitForm function when the button upload is clicked. I have also file input with ref="file". This is run in client (browser) side. I got 404 error.
What I am trying to do here is to upload an image file to google drive. How can I do this right? Any solution for my problem?
The 404 error is caused because the url is missing the files part: https://www.googleapis.com/upload/drive/v3/files?uploadType=media. See Google Drive APIs > REST - Files: create.
I managed to upload an image that was read from <input type="file" accept="image/*"> with FileReader.readAsDataURL() method as follows:
var metadata = {
name: 'image.jpg',
mimeType: 'image/jpeg'
}
var user = gapi.auth2.getAuthInstance().currentUser.get();
var oauthToken = user.getAuthResponse(true).access_token;
var boundary = 'foo_bar_baz';
var data = '--' + boundary + '\n';
data += 'content-type: application/json; charset=UTF-8' + '\n\n';
data += JSON.stringify(metadata) + '\n';
data += '--' + boundary + '\n';
var dataURL = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+EKhWh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZ...'
var dataURLparts = dataURL.split(',', 2);
var dataURLheaderParts = dataURLparts[0].split(':');
var dataURLheaderPayloadParts = dataURLheaderParts[1].split(';');
data += 'content-transfer-encoding: ' + dataURLheaderPayloadParts[1] + '\n';
data += 'content-type: ' + dataURLheaderPayloadParts[0] + '\n\n';
data += dataURLparts[1] + '\n';
data += '--' + boundary + '--';
$.ajax({
type: 'POST',
url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + oauthToken);
},
contentType: 'multipart/related; boundary=' + boundary,
data: data,
processData: false
}).done(function(response) {
console.log(response);
});
After many hours of hair pulling and viewing the same answers. The only thing that worked for me was to change from the multipart request (that Google documents) to using FormData.
Credit to this answer.
While the data arrived to Drive (successful upload), it wasnt processed correctly so image or PDF were not viewable and downloading it showed it was saved in base64.
const metadata = JSON.stringify({
name: myFile.name,
mimeType: myFile.type,
});
const requestData = new FormData();
requestData.append("metadata", new Blob([metadata], {
type: "application/json"
}));
requestData.append("file", items[0].file);
const xhr = new XMLHttpRequest();
xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart");
const token = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token;
xhr.setRequestHeader("Authorization", `Bearer ${token}`);
xhr.send(requestData);
I'm trying to download and display an image that is returned from a wcf service using jQuery.ajax. I'm not able to work with the data I've received and I'm not sure why. I've tried a lot of things but nothing seems to work.
Here the service :
public Stream DownloadFile(string fileName, string pseudoFileName)
{
string filePath = Path.Combine(PictureFolderPath, fileName);
if (System.IO.File.Exists(filePath))
{
FileStream resultStream = System.IO.File.OpenRead(filePath);
WebOperationContext.Current.OutgoingResponse.ContentType = "application/x-www-form-urlencoded";
return resultStream;
}
else
{
throw new WebFaultException(HttpStatusCode.NotFound);
}
}
Here my ajax call :
$.ajax({
type: "GET",
url: apiURL + serviceDownloadFile.replace('{filename}', filename),
headers: headers,
contentType: "application/x-www-form-urlencoded",
processData : false,
success: function(response) {
var html = '<img src="data:image/jpeg;base64,' + base64encode(response) +'">';
$("#activitiesContainer").html(html);
},
error: function (msg) {
console.log("error");
console.log(msg);
}
});
Putting the url in a <img> tag does display the image properly, but since the service requires an authorization header, the page ask me for credentials each time.
So my question is, what to do this the response data so I can display it ? using btoa(); on the response displays an error :
string contains an invalid character
Thanks.
As suggested by Musa, using XMLHttpRequest directly did the trick.
var xhr = new XMLHttpRequest();
xhr.open('GET', apiURL + serviceDownloadFile.replace('{filename}', filename).replace('{pseudofilename}', fileNameExt), true);
xhr.responseType = 'blob';
xhr.setRequestHeader("authorization","xxxxx");
xhr.onload = function(e) {
if (this.status == 200) {
var blob = this.response;
var img = document.createElement('img');
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // Clean up after yourself.
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
};
xhr.send();