Catch up wih the Appery.io community on our forum. Here you'll find information on the lastest questions and issues Appery.io developers are discussing.
https://forum.appery.io/
Hi
I am looking for the old tutorials and they dont seem to be on the site. I want to upload files to the database. The only tutorial I could find was this one "Uploading files to the Appery.io database"
The previous tutorial which I still have an app for, let me upload an image for a particular product and show it in preview . Please help.
Thanks
Deon
Hi Deon,
We constantly change, update, add and remove Appery.io tutorials. Unfortunately, it must be deprecated.
Here is how to read and show a file:
http://stackoverflow.com/questions/18...
Or you could use jQuery plug-in, for example:
https://github.com/blueimp/jQuery-Fil...
That is a shame. I just used the code from an older app and it worked perfectly. I am sure your client would benefit tremendously from uploading files with a preview?
Deon,
An old tutorial allowed you to load text files only. They could be displayed on preview. Now, this tutorial describes how to load all file types, but preview isn't available.
We also have another tutorial with photo preview: http://docs.appery.io/tutorials/using...
If you could post the code you use we can search for this old tutorial.
Incorrect. I am right now using it to upload photos. Here is the jscript
var file;
function fileSelectHandler(e) {
var files = e.target.files || e.dataTransfer.files;
file = files[0];
previewFile();
}
function upload() {
var serverUrl = 'https://api.appery.io/rest/1/db/files/' + file.name;
Code: Select all
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("X-Appery-Database-Id", Scoopon_settings.database_id),
request.setRequestHeader("X-Appery-Session-Token", localStorage.getItem('SessionToken')),
request.setRequestHeader("Content-Type", file.type);
},
url: serverUrl,
data: file,
processData: false,
contentType: false,
success: function(data) {
// OPTIONAL, this is the file name under which the image was stored in database....
// localStorage.setItem('db_file_name', file.name);
localStorage.setItem('db_file_url', data.fileurl);
createClient.execute({});
Appery.navigateTo('Accommodation', {transition: 'flip'});
},
error: function(data) {
// do something in case of an error...
}
}); }
function changeplatter() {
var serverUrl = 'https://api.appery.io/rest/1/db/files/' + file.name;
Code: Select all
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("X-Appery-Database-Id", Scoopon_settings.database_id),
request.setRequestHeader("X-Appery-Session-Token", localStorage.getItem('SessionToken')),
request.setRequestHeader("Content-Type", file.type);
},
url: serverUrl,
data: file,
processData: false,
contentType: false,
success: function(data) {
// OPTIONAL, this is the file name under which the image was stored in database....
// localStorage.setItem('db_file_name', file.name);
localStorage.setItem('db_file_url', data.fileurl);
createClient.execute({});
Appery.navigateTo('Accommodation', {transition: 'flip'});
},
error: function(data) {
// do something in case of an error...
}
}); }
function uploadaccom() {
var serverUrl = 'https://api.appery.io/rest/1/db/files/' + file.name;
Code: Select all
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("X-Appery-Database-Id", Scoopon_settings.database_id),
request.setRequestHeader("X-Appery-Session-Token", localStorage.getItem('SessionToken')),
request.setRequestHeader("Content-Type", file.type);
},
url: serverUrl,
data: file,
processData: false,
contentType: false,
success: function(data) {
// OPTIONAL, this is the file name under which the image was stored in database....
// localStorage.setItem('db_file_name', file.name);
localStorage.setItem('db_file_url', data.fileurl);
accomcreate.execute({});
Appery.navigateTo('Accommodation', {transition: 'flip'});
},
error: function(data) {
// do something in case of an error...
}
}); }
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);
} }
Just thinking about this. Why are you depreciating the tutorials. Many of us developers have used this to create apps and we need to reference back in case of support issues and changes that we need to apply.
This is because a new version is for all types and more common. We'll check this.
Hi Deon,
This code was deprecated as it doesn't use Appery.io builder functionality correctly. In fact, it does the same that is implemented much more easier now, except from it has a preview where binary files cannot be displayed.
We restored an old tutorial for you and I can send you HTML page and all the files, just send me a request to a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and I'll send you the tutorial back.