I am using Angular ng-file-upload (https://github.com/danialfarid/ng-file-upload) on the frontend to manage the file upload process.
Unfortunately, form contains a complex object with multiple files. Using the MultipartFormData (https://www.playframework.com/documentation/2.5.x/ScalaBodyParsers) on the server side I have successfully decomposed the uploaded content and can read it from the request.body.
Now, to my surprise, I do not have a simple Json Objects but rather a strangely formed datatype, described on the ng-file-upload website as:
(...) server implementations expecting nested data object keys in .key or [key] format.
Example: data: {rec: {name: 'N', pic: file}} sent as: rec[name] -> N, rec[pic] -> file
data: {rec: {name: 'N', pic: file}, objectKey: '.k'} sent as: rec.name -> N, rec.pic -> file
So far I have managed to bring all the data to a common MultipartFormData.Part type, using the DataPart and FilePart like this:
val opts = body.dataParts.map {
case (key, values) => DataPart(key, values.head)
}
val parts = opts ++ body.files
So I am now left with a quite unfortunate Iterable[Part]:
0 = {MultipartFormData$DataPart#86271} "DataPart(arabic[active],false)"
1 = {MultipartFormData$DataPart#86273} "DataPart(english[active],true)"
2 = {MultipartFormData$DataPart#86277} "DataPart(english[url],2132132132)"
...
7 = {MultipartFormData$FilePart#76473} "FilePart(english[image],fb_icon_325x325.png,Some(image/png),TemporaryFile(/tmp/playtemp5909927824995768544/multipartBody8348573128070542611asTemporaryFile))"
Each object name contains the key of it's Json structure and its according value. Now instead of key[level1][level2] I would like to parse it to objects, in my case:
case class PcBanner(english: PcBanners, arabic: PcBanners, kurdish: PcBanners)
case class PcBanners(active: Boolean, url: Option[String], image: Option[String])`
I hope you got the idea.
The question
I know I could try to parse the name strings trying to fit it to objects, but I believe I made a mistake someway in the middle.
Is there a way to parse this structure into the objects, using field names as a reference? Any build in Play functions or alike?
Thanks for help!
As I stated in the title my case was to send images. As you would expect, I am also presenting a preview and the files currently saved in the database.
Considering all pros and cons I have decided to send all the data in JSON format, both ways. Meaning that the images are encoded and sent along in JSON structure.
Despite the fact that above solution looks very convenient it actually creates new problems during the implementation.
You will quickly exceed the server's POST request size limit. For Play server the default 100kB is possible to be extended, but...
I have soon run into some data malformations as the image saved as huge String of bytes probably had some sending/parsing errors.
Not going deeper into this faulty solution I have used the #danial advice:
No have the file sent separately like this
{file: file, otherData: JSON.stringify(myData)}
My solution
If anyone would like to use similar approach to mine I present my answer.
On the front-end side I have decided used ng-file-upload library. Binding it to HTML component with ngf-select with ngf-drop which enables the component:
<div ngf-drop ngf-select
ng-model="image"
ngf-accept="'image/*'"
ngf-resize="{width: {{width}}, height: {{height}}, quality: 1.0, restoreExif: false}">
<img ng-show="!!image && !!image.$ngfName" ngf-src="image">
<img ng-show="(!image || !image.$ngfName)" ng-src="{{ imageUrl }}">
</div>
Inside the upload tag I put the image preview. This works flawlessly. If the image is not selected I use the image saved in the db.
The data and images do not share the model anymore. The upload function looks as follow:
return Upload.upload({
url: url,
data: {file: images, data: angular.toJson(data)}
}).then(function (resp) {
console.log(resp);
}, function (error) {
console.log(error);
});
Putting together all the above gave me the output data object:
{
"english":{
"active":true,
"url":"http://google.com"
},
"arabic":{
"active":true,
"url":"http://google.com"
},
"kurdish":{
"active":true,
"url":"http://google.com"
}
}
On the server side the JSON matches the prepared case class and is parsed with build-in Jackson parser, allowing for easy object manipulation. The image has to be manually selected:
val json = r.body.dataParts("data")
val jsValue = Json.parse(json.head)
val result = jsValue.validate(LocalizedBanner.dataModelFormat) // parse JSON
Extracting the files from body can be done with build in function .file:
val key = s"file[${lang.name}][${imageType.name}]"
body.file(key).map(mp => (mp.ref.file, imageType))
Enjoy!
Related
My use case is a mobile app with react native, but I guess it's very common good practices.
I want to be able, in an app, to take an image (from the camera or the gallery), and to be able to store it so it can be fetched from the date it was added, or some metadata added by the user.
The theory seems quite simple, a way of doing it can be :
Use any library (eg this great one) to get the image,
Store image as base64 and metadata in, let's say RealmJS (some internal DB),
Query this DB to get what I want.
This should work, and should be quite simple to implement.
But I'm wondering about a few things :
According to the performance of a smartphone's camera, isn't it quite a shame to store it as base64 (and no checksum, more memory used, ...) ?
This format, base64, isn't a bad idea in general for storing image ?
Is it a good idea to store the image in RealmJS, as it will be a pain for the user to reuse the image (share it on facebook...), but on the other hand, if I wrote it to the smartphone and store a URI, it can lead to a lot of problems (missing file if the user deletes it, need to access to memory, ...)
Is this approach "clean" (ok it works, but ...) ?
If you have any experience, tips, or good practice to share, I'll be happy to talk about it :)
You can store binary data (images) in Realm. But if you are using Realm locally (not sync), I will suggest that you store the image on the file system and store the path in Realm. Your model could be something like:
const ImageSchema = {
name: 'Image',
properties: {
path: 'string',
created: 'Date',
modified: 'Date?',
tags: 'Tag[]'
}
};
const TagSchema = {
name: 'Tag',
properties: {
name: 'string',
images: { type: 'linkingObjects', objectType: 'Image', property: 'tags' }
}
};
That is, for every image the timestamp for its creation is stored. Moreover, it has an optional timestamp if the image has been modified. The property path is where to find the image. If you prefer to store the image, you can use a property of type data instead. To find image less that a week old, you can use realm.objects('Image').filtered('created >= $1', new Date(Date.now()-7*24*60*60)).
Just for fun, I have added a list of tags for each image. The linkingObject in Tag makes it possible to find all image which have a particular tag e.g., realm.objects('Tag').filtered('#links.Tag.name == "Dog"').
Using the newest version of Waterline 0.13.1-6 standalone.
The array type no longer exist in this version. So I assume the way to store arrays is now to use the JSON type.
Sample of my model Model:
attributes: {
someArray: { type: 'json' }
}
Problem: on an instance of Model, model.someArray is now a String. I should JSON.parse it each time I request one to get the values in the array. That's very not convenient and can obviously lead to errors.
Is there a built-in way in the new Waterline to make this clean (automatically parse JSON fields...)?
You are fine to use JSON as you are suggesting. No need to parse it, this is done automatically when you do your meta fetch or find. You can do
YourModel.create({someArray: [1,2,3]}).meta({fetch: true}).then( out => {
console.log(out.someArray[0]); //1;
});
I would have some other identifying attribute for finding it, like say myRef: {type: 'string'}
Then you can do
YourModel.find({myRef: 'something'}).limit(1).then( out => {
console.log(out[0].someArray[1]); //2
});
I am using semantic ui search module, the content will be a remote JSON file, can make it work but no matter what i typed whether its found or not, i will show up the list from the JSON file.
script
$('.ui.search')
.search({
apiSettings: {
url: 'http://localhost/api/materialMaster.json'
},
fields: {
results : 'data',
title : 'matcode'
},
minCharacters : 2
})
;
JSON file format is
{"data":[{"matcode":"0A66244S1"},{"matcode":"200GD0S100150CM"}]}
See if this can help. I had this same problem and I solved using this instructions.
https://stackoverflow.com/a/32937262/5381965
I'm using Worklight framework to construct a mobile app for IOS, and is using Sencha Touch 2.3 to build the app.
Due to the environment, i cannot use proxy in Sencha Touch Store/Model objects to load data from the server, as i would need to use Worklight's adapter to retrieve the info. I have managed to do that using some boilerplate codes.
However, i wish that i could utilize the Sencha Model more, and as such, am thinking whether it is possible for me to load a JSON object into the Model object automatically, without specifying a proxy.
Currently i'm doing a lot of loop and setter call to load the data from the JSON object to a model, like below:
var profile = Ext.create('Profile', {
Id: rawProfile.Id,
Name: rawProfile.Name
Age: rawProfile.Age
.....
}
where rawProfile is the JSON object i loaded from the server.
Any way i can make this cleaner?
You could create a Model class which would contain the data contained in your rawProfile object.
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
name: 'Age',
...
}],
proxy: {
type: 'memory',
reader: 'json'
}
});
I've also set an in memory proxy which will read json objects.
You could then create a Store which would use the model you defined and the in memory proxy (meaning you wouldn't be using Ext's build in ajax messaging).
Ext.create('MyStore', {
model: 'MyModel',
autoLoad: false
});
Setting the autoLoad to be false, as you want to get the data from a different source.
Therefore, once you have your json object you can load it into the store by calling store.loadRawData(jsonObject).
In this case, the jsonObject would be the object containing all the json objects returned from the server, meaning that your code doesn't have to handle iterating through the records and you can leave it to the Sencha classes.
However you would need to figure out the writing data back to the server.
I'd recommend running through the Sencha Data Package tutorial as it gives a good intro to the data package
If all the fields map 1:1 with the json object, you can do this:
var profile = Ext.create('Profile', rawProfile);
Alternatively (or to avoid the convert functions for fields to be called), you can directly set the data property on the created model.
var profile = Ext.create('Profile');
profile.data = rawProfile;
Again, this requires a 1:1 on the fields and json object.
I have the following code to fetch the data for my collection but with specifying what colors should come from the server:
fruits = new FruitsCollection();
fruits.fetch({
data: {color: ['red', 'green']}
});
This is what I expect:
http://localhost:8000/api/fruits/?color=red&color=green
This is what I got:
http://localhost:8000/api/fruits/?color[]=red&color[]=green
As you can see, for some unknown reason Backbone.js is appending the square brackets to the URL params, instead of having color=green I have color[]=green
I'm using django-rest-framework in the server side and I know I can do a hardcoded fix there, but I prefer to know the logic reason because it is happening and how can I solve it from my javascript.
Backbone uses jQuery.ajax under the hood for the ajax request so you need to use the traditional: true options to use "traditional" parameter serialization:
fruits = new FruitsCollection();
fruits.fetch({
traditional: true,
data: {color: ['red', 'green']}
});