Store FormData object on localStorage HTML5 - javascript

I'm trying to save some data to localStorage on my offline application. When user on offline mode, then browser will collect data from form, FormData object, store it to localStorage and when browser is online then it will push the FormData object that store in localStorage to server via jQuery ajax. The complexity is that the form have dynamic fields and can have the fileupload field and the problem is that the localStorage on html5 support data as string and not the object.
Collection.prototype.storeOfflineData = function(collectionId){
var formData = new FormData($('form')[0]);
pendingSites = {"collectionId" : collectionId, "formData" : formData};
window.localStorage.setItem("offlineSites", JSON.stringify(pendingSites));
Collection.prototype.goHome();
Collection.prototype.showErrorMessage("Successfully store data in offline.");
}
When the browser is online,connected to internet, I created the methods to read FormData from local storage and make ajax request to server but ajax request got error because the JSON.parse return "[object object]"
Collection.prototype.pushingPendingSites = function(){
pendingSites = JSON.parse(window.localStorage.getItem("offlineSites"));
if(pendingSites != null){
console.log(pendingSites[i]["formData"]);
Collection.prototype.ajaxCreateSite(pendingSites[i]["collectionId"], pendingSites[i]["formData"]);
}
}
Collection.prototype.ajaxCreateSite = function(collectionId, formData){
$.ajax({
url: '/mobile/collections/' + collectionId + '/sites', //Server script to process data
type: 'POST',
success: function(){
Collection.prototype.goHome();
Collection.prototype.showErrorMessage("Successfully saved.");
},
error: function(data){
Collection.prototype.showErrorMessage("Save new site failed!");
},
data: formData,
cache: false,
contentType: false,
processData: false
});
}

Related

Sending a file and json data with AJAX

I have tried two methods of sending the file and json data from client side over to server side. I been partially successful with both methods, I could use some help on completing this. I have two methods:
Method 1: I am able to access the file server side, but my form data (input, select, textarea) are not available to access.
Method 2: Appends the data to the formData object. The issue with method one is that I got it to work the other day, but I believe my browser cached the code and now its not working, so I feel like im back at step one. I am able to access the data by using request.data, but its bytes. The code that was working (request.form['json_data'] or request.files['file'].read()) and now its not working.
Client Side Code:
$('form[name="upload-form"]').on('submit', (event) => {
event.preventDefault();
$('#form-loader').fadeIn()
// Method 1
// let formData = new FormData($('#upload-form')[0]);
// Method 2
let entry = get_form_entry('upload-form'); -> UDF to get all form data. Iterates each form data and applies .val() and creates a dict.
const formData = new FormData();
formData.append('json_data', JSON.stringify(entry));
formData.append('file', $('#file')[0].files[0]);
$.ajax({
data: formData,
url: '/newEntry',
type: 'POST',
contentType: false,
processData: false,
cache: false,
success: function () {
$('#form-loader').fadeOut()
},
error: function () {
$('#form-loader').fadeOut()
},
})
})
Server Side Code:
json_data = request.form['json_data']
# json_data = request.data
file_data = request.files['file'].read()

How to retrieve file on server side send with ajax for a node/express app

I have a Node/Express app and i want to sent a file with a form, i want to send it with ajax so i can process the server response.
So far my form is:
<form method='POST' enctype='multipart/form-data' id='excelform'>
<input type='file' id='target_file' name='target_file' required>
</form>
<button class='btn btn-menu3 align-self-end' onClick='excel_email9f();'>Enviar</button>
i have a button that calls the following function for an ajax request:
function excel_email9f(){
var data = new FormData();
var file = $('#target_file')[0].files[0];
data.append('file', file);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/Excelemail9f",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
var response = data.q0;
alert(response);
},
error: function (e) {
console.log("ERROR : ", e);
}
});
};
i can access the file and its properties like name.
On server side i have this route
app.post('/Excelemail9f',function(req,res){
// checking req.files is empty or not
if (Object.keys(req.files).length == 0) {
return res.status(400).send('No files were uploaded.');
}
console.log('name: ' + req.files.target_file.name);
let target_file = req.files.target_file;
// target_file.mv(path, callback)
target_file.mv(path.join(__dirname, 'uploads', target_file.name), (err) => {
if (err) throw err;
res.send(JSON.stringify({q0 : 0}));
})
})
How do i access the file on the server side, i use req.files.target_file but i get the following error:
TypeError: Cannot read property 'name' of undefined
You're posting the data as a FormData object, but you're referring to the HTML input element's ID as the filename. You populate the FormData object by calling data.append('file', file);, so you need to reference it by req.files.file rather than req.files.target_file.

Upload Attachment and some additional parameters to MVC Controller

I have a MVC Controller with the following signature:-
[HttpPost]
public async Task<JsonResult> SaveBrochureAsAttachment(Guid listingId, HttpPostedFileWrapper attachmentFile)
{
///some logic
}
How do I make an ajax call and send the file attachment and additional listingId parameter. Currently I am only able to send the attachment like this:-
var uploadFile = function () {
if ($('#attachmentFile').val()) {
}
else {
alert('No File Uploaded');
return;
}
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
url: '/Listing/SaveBrochureAsAttachment',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert('File Uploaded');
},
error: function (jqXHR, textStatus, errorThrown) {
$("#FileUpload").replaceWith($("#FileUpload").val('').clone(true));
alert('File Uploaded Error');
},
cache: false,
contentType: false,
processData: false
});
return false;
}
Currently as you folks can see I am only able to send the attachment. How do I also send the Guid listingId to match the controller signature.
Try adding another formdata parameter:
formData.append("listingId", guidValue);
Provided you have the guid value accessible. You can use this to generate one from the client. Or create one from the server:
var guidValue = '#Guid.NewGuid()';
one approach would be to your controller accept viewmodel (a class) which contains different property you need. and use formdata.append required stuff to post to the server.
On Server side; you will need to use modelbinder so that you will get required stuff populated.
Refernce for modelbinder : https://www.dotnetcurry.com/aspnet-mvc/1261/custom-model-binder-aspnet-mvc
you can get more on google. :)

Upload to Image Server using jQuery as Relay

Problem:
I have a situation where I'd like to upload a file (pdf, image, etc.) to an API Endpoint that accepts one of these types of files. However, the file is located on another web service somewhere. I'm trying to devise a clever solution that will allow me to (a) download the remote file (and store it as bytes in memory or something) then (b) upload that file through the API.
I have jQuery code that demonstrates how to upload a local file using jQuery with no backend code, but I'd like to extend it to allow me to upload something that is stored remotely.
Constraints:
I don't want to use any backend infrastructure on my image uploading page (ie. no php, python, ruby, etc.)
I don't want the end user of my form to need to download the file to their machine and upload the file as a two-step process.
What I've got so far:
I've seen some solutions on SO that kind-of connect the dots here in terms of downloading a file as a bytearray, but nothing that demonstrates how you might upload that.
Download File from Bytes in JavaScript
jQuery-only File Upload to Stripe API*
Keep in mind, Stripe is the example I have, but I'd like to try and replicate this on say Imgur or another API (if I can get this working). Hopefully someone else has some ideas!
$('#fileinfo').submit(function(event) {
event.preventDefault();
var data = new FormData();
var publishableKey = 'pk_test_***';
data.append('file', $('#file-box')[0].files[0]);
data.append('purpose', 'identity_document');
$.ajax({
url: 'https://uploads.stripe.com/v1/files',
data: data,
headers: {
'Authorization': 'Bearer ' + publishableKey,
// 'Stripe-Account': 'acct_STRIPE-ACCOUNT-ID'
},
cache: false,
contentType: false,
processData: false,
type: 'POST',
}).done(function(data) {
$('#label-results').text('Success!');
$('#upload-results').text(JSON.stringify(data, null, 3));
}).fail(function(response, type, message) {
$('#label-results').text('Failure: ' + type + ', ' + message);
$('#upload-results').text(JSON.stringify(response.responseJSON, null, 3));
});
return false;
});
I actually got this working for Stripe by doing this:
https://jsfiddle.net/andrewnelder/up59zght/
var publishableKey = "pk_test_xxx"; // Platform Publishable Key
var stripeAccount = "acct_xxx"; // Connected Account ID
$(document).ready(function () {
$('#file-upload').on('submit', function (e) {
e.preventDefault();
console.log('Clicked!');
var route = $('#file-route').val(); // URL OF FILE
var fname = route.split("/").slice(-1)[0].split("?")[0];
var blob = fetchBlob(route, fname, uploadBlob);
});
});
function fetchBlob(route, fname, uploadBlob) {
console.log('Fetching...')
var oReq = new XMLHttpRequest();
oReq.open("GET", route, true);
oReq.responseType = "blob";
oReq.onload = function(e) {
var blob = oReq.response;
console.log('Fetched!')
uploadBlob(fname, blob);
};
oReq.send();
}
function uploadBlob(fname, blob) {
var fd = new FormData();
fd.append('file', blob);
fd.append('purpose', 'identity_document');
console.log('Uploading...');
$.ajax({
url: 'https://uploads.stripe.com/v1/files',
data: fd,
headers: {
'Authorization': 'Bearer ' + publishableKey,
'Stripe-Account': stripeAccount
},
cache: false,
contentType: false,
processData: false,
type: 'POST',
}).done(function(data) {
console.log('Uploaded!')
}).fail(function(response, type, message) {
console.log(message);
});
}

HttpClient PostAsync equivalent in JQuery with FormURLEncodedContent instead of JSON

I wrote a JQuery script to do a user login POST (tried to do what I have done with C# in the additional information section, see below).
After firing a POST with the JQuery code from my html page, I found the following problems:
1 - I debugged into the server side code, and I know that the POST is received by the server (in ValidateClientAuthentication() function, but not in GrantResourceOwnerCredentials() function).
2 - Also, on the server side, I could not find any sign of the username and password, that should have been posted with postdata. Whereas, with the user-side C# code, when I debugged into the server-side C# code, I could see those values in the context variable. I think, this is the whole source of problems.
3 - The JQuery code calls function getFail().
? - I would like to know, what is this JQuery code doing differently than the C# user side code below, and how do I fix it, so they do the same job?
(My guess: is that JSON.stringify and FormURLEncodedContent do something different)
JQuery/Javascript code:
function logIn() {
var postdata = JSON.stringify(
{
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
});
try {
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: postdata,
dataType: "json",
success: getSuccess,
error: getFail
});
} catch (e) {
alert('Error in logIn');
alert(e);
}
function getSuccess(data, textStatus, jqXHR) {
alert('getSuccess in logIn');
alert(data.Response);
};
function getFail(jqXHR, textStatus, errorThrown) {
alert('getFail in logIn');
alert(jqXHR.status); // prints 0
alert(textStatus); // prints error
alert(errorThrown); // prints empty
};
};
Server-side handling POST (C#):
public override async Task ValidateClientAuthentication(
OAuthValidateClientAuthenticationContext context)
{
// after this line, GrantResourceOwnerCredentials should be called, but it is not.
await Task.FromResult(context.Validated());
}
public override async Task GrantResourceOwnerCredentials(
OAuthGrantResourceOwnerCredentialsContext context)
{
var manager = context.OwinContext.GetUserManager<ApplicationUserManager>();
var user = await manager.FindAsync(context.UserName, context.Password);
if (user == null)
{
context.SetError(
"invalid_grant", "The user name or password is incorrect.");
context.Rejected();
return;
}
// Add claims associated with this user to the ClaimsIdentity object:
var identity = new ClaimsIdentity(context.Options.AuthenticationType);
foreach (var userClaim in user.Claims)
{
identity.AddClaim(new Claim(userClaim.ClaimType, userClaim.ClaimValue));
}
context.Validated(identity);
}
Additional information: In a C# client-side test application for my C# Owin web server, I have the following code to do the POST (works correctly):
User-side POST (C#):
//...
HttpResponseMessage response;
var pairs = new List<KeyValuePair<string, string>>
{
new KeyValuePair<string, string>( "grant_type", "password"),
new KeyValuePair<string, string>( "username", userName ),
new KeyValuePair<string, string> ( "password", password )
};
var content = new FormUrlEncodedContent(pairs);
using (var client = new HttpClient())
{
var tokenEndpoint = new Uri(new Uri(_hostUri), "Token"); //_hostUri = http://localhost:8080/Token
response = await client.PostAsync(tokenEndpoint, content);
}
//...
Unfortunately, dataType controls what jQuery expects the returned data to be, not what data is. To set the content type of the request data (data), you use contentType: "json" instead. (More in the documentation.)
var postdata = JSON.stringify(
{
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
});
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: postdata,
dataType: "json",
contentType: "json", // <=== Added
success: getSuccess,
error: getFail
});
If you weren't trying to send JSON, but instead wanted to send the usual URI-encoded form data, you wouldn't use JSON.stringify at all and would just give the object to jQuery's ajax directly; jQuery will then create the URI-encoded form.
try {
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: {
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
},
dataType: "json",
success: getSuccess,
error: getFail
});
// ...
To add to T.J.'s answer just a bit, another reason that sending JSON to the /token endpoint didn't work is simply that it does not support JSON.
Even if you set $.ajax's contentType option to application/json, like you would to send JSON data to MVC or Web API, /token won't accept that payload. It only supports form URLencoded pairs (e.g. username=dave&password=hunter2). $.ajax does that encoding for you automatically if you pass an object to its data option, like your postdata variable if it hadn't been JSON stringified.
Also, you must remember to include the grant_type=password parameter along with your request (as your PostAsync() code does). The /token endpoint will respond with an "invalid grant type" error otherwise, even if the username and password are actually correct.
You should use jquery's $.param to urlencode the data when sending the form data . AngularJs' $http method currently does not do this.
Like
var loginData = {
grant_type: 'password',
username: $scope.loginForm.email,
password: $scope.loginForm.password
};
$auth.submitLogin($.param(loginData))
.then(function (resp) {
alert("Login Success"); // handle success response
})
.catch(function (resp) {
alert("Login Failed"); // handle error response
});
Since angularjs 1.4 this is pretty trivial with the $httpParamSerializerJQLike:
.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
method: 'POST',
url: baseUrl,
data: $httpParamSerializerJQLike({
"user":{
"email":"wahxxx#gmail.com",
"password":"123456"
}
}),
headers:
'Content-Type': 'application/x-www-form-urlencoded'
})
})

Categories