jQuery and object database error (storing info in database)

[Anna G.]

Hello,

We're trying to use an object database with jQuery to store information, and we're getting this error: {"code":DBSC007", "description":"serializationerror"}

Can you please explain what this error means and how we should fix it?

Here is our js code:
code
var file;
function fileSelectHandler(e) {
var files = e.target.files || e.dataTransfer.files;
file = files[0];
previewFile();
}

function userData(filename) {
var url = 'https://api.appery.io/rest/1/db/collections/things/';
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("X-Appery-Database-Id", "51c1d0bde4b0d0a692ef56b1");
request.setRequestHeader("Content-Type", "application/json");
},
url: url,
data: {"filename": filename},
processData: false,
success: function(html) {
alert("it worked");
},
failure: function(html) {
alert("it didn't work");
}
});
}

function upload() {

Code: Select all

 var serverUrl = 'https://api.appery.io/rest/1/db/files/' + file.name.replace(/ /g, "_"); 

 $.ajax({ 
     type: "POST", 
     beforeSend: function(request) { 
         request.setRequestHeader("X-Appery-Database-Id", "51c1d0bde4b0d0a692ef56b1"), 
         request.setRequestHeader("X-Appery-Session-Token", localStorage.getItem('token')), 
         request.setRequestHeader("Content-Type", file.type); 

     }, 
     url: serverUrl, 
     data: file, 
     processData: false, 
     contentType: false, 
     success: function(html) { 
         // upload successful 
         $(".content").html(html); 
         $('#success').show(); 

         userData(html.filename); 
      }, 
     error: function(html) { 
         // upload unsuccessful 
         $(".content").html(html); 
         $('#error').show(); 

}
});
}

function previewFile() {

Code: Select all

 var previewContainer = $('table[dsid=preview]'); 
 var fileName = $('[name=fileName]'); 
 // make the preview container visible once a file was selected 
 previewContainer.toggle(); 

 // set the file name 
 fileName.text(file.name); 

 // display image in preview container 
 if (file.type.indexOf("image") == 0) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
         var image = $('[name=image]'); 
         image.attr('src', e.target.result); 
         $('[class=mobileimage1_div]').show(); 
     } 
     reader.readAsDataURL(file); 
 } 

}
/code

The code passes through the userData(filename) and uploads the actual file (neither alert pops up), but it doesn't upload the file name to the "things" collection.

Any help you can give would be much appreciated.

Thanks,
Anna

[Kateryna Grynko]

Hi Anna,

Working on it.

[Kateryna Grynko]

Besides the Database ID you also need to add a session key to the headers.
Specify it for the uploaded file:
coderequest.setRequestHeader("X-Appery-Session-Token", localStorage.getItem('token'))/code
Don't forget to use it to save the file. This operation also requires security and must be accompanied by a session key.

[Anna G.]

Hi Katya,

I added the session key code for the file name (we already have it for saving the file, right?). But I'm still getting the error, because I'm not sure how to change the mapping/variables for the datasource after doing that.

Thank you,
Anna

[Kateryna Grynko]

Anna,

Please specify the sequence of actions. Is there the following code codelocalStorage.getItem('token')/code when you call userData()?

[Anna G.]

Hi Katya,

Yes, I think so. Here is the current code:

codevar file;
function fileSelectHandler(e) {
var files = e.target.files || e.dataTransfer.files;
file = files[0];
previewFile();
}

function userData(filename) {
var url = 'https://api.appery.io/rest/1/db/collections/things/';
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("X-Appery-Database-Id", "51c1d0bde4b0d0a692ef56b1");
request.setRequestHeader("X-Appery-Session-Token", localStorage.getItem('token')),
request.setRequestHeader("Content-Type", "application/json");
},
url: url,
data: {"filename": filename},
processData: false,
success: function(html) {
alert("it worked");
},
failure: function(html) {
alert("it didn't work");
}
});
}

function upload() {

Code: Select all

 var serverUrl = 'https://api.appery.io/rest/1/db/files/' + file.name.replace(/ /g, "_"); 

 $.ajax({ 
     type: "POST", 
     beforeSend: function(request) { 
         request.setRequestHeader("X-Appery-Database-Id", "51c1d0bde4b0d0a692ef56b1"), 
         request.setRequestHeader("X-Appery-Session-Token", localStorage.getItem('token')), 
         request.setRequestHeader("Content-Type", file.type); 

     }, 
     url: serverUrl, 
     data: file, 
     processData: false, 
     contentType: false, 
     success: function(html) { 
         // upload successful 
         $(".content").html(html); 
         $('#success').show(); 

         userData(html.filename); 
      }, 
     error: function(html) { 
         // upload unsuccessful 
         $(".content").html(html); 
         $('#error').show(); 

}
});
}

function previewFile() {

Code: Select all

 var previewContainer = $('table[dsid=preview]'); 
 var fileName = $('[name=fileName]'); 
 // make the preview container visible once a file was selected 
 previewContainer.toggle(); 

 // set the file name 
 fileName.text(file.name); 

 // display image in preview container 
 if (file.type.indexOf("image") == 0) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
         var image = $('[name=image]'); 
         image.attr('src', e.target.result); 
         $('[class=mobileimage1_div]').show(); 
     } 
     reader.readAsDataURL(file); 
 } 

}/code

Basically, we're using the upload image tutorial to upload a file to the database, but we also want to upload form data (with the file name given by the file database) to the object database once the file upload is successful. We tried to implement what the database docs had in order to communicate between the file and object databases, but that didn't work. When we added the token to the request header, it didn't change the error we were getting. We also tried adding the service to the page that users will upload from and got the same error.

Thanks,
Anna

[Kateryna Grynko]

Let's check what data you send in userData()
In the beginning, run the following:codealert( filename ); /code
Is this the correct string? Or is this a more complicated object?
If this is a usual string then please share your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and tell us the app name.

[Anna G.]

Hi Katya,

Adding the alert showed the file name as it shows up in the file database. I shared the file with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a. Our app is called "installers".

Thanks,
Anna

[Anna G.]

Sorry, I just realized that you only asked me to share it if it showed something weird. Oops...

[Kateryna Grynko]

If this is a usual string.. Thank you for sharing, I'll take a look