funtusov / ember-cli-form-data Goto Github PK
View Code? Open in Web Editor NEWEmber CLI addon that adds FormData file uploads to Ember Data
License: MIT License
Ember CLI addon that adds FormData file uploads to Ember Data
License: MIT License
Hello!
I need some help getting this working, if you would be so kind...
I'm trying to allow users to upload an image of their insurance card, but as you can see in the model an attribute whose type is 'file' shows up as undefined, and I think it's not finding the Mixin?
I'm using Ember Data 2.14.2.
I'm pretty new to Ember. Any help would be greatly appreciated.
In order to work with Ember 4 the method ajaxOptions should return FormData object in 'body' field instead of 'data'. Here is the code:
ajaxOptions: function (url, type, options) {
var data;
if (options && 'data' in options) {
data = options.data;
}
var hash = this._super.apply(this, arguments);
if (
typeof FormData !== 'undefined' &&
data &&
this.formDataTypes.indexOf(type) >= 0
) {
hash.processData = false;
hash.contentType = false;
if (typeof hash.headers !== 'undefined') {
delete hash.headers['content-type'];
}
hash.body = this._getFormData(data);
}
return hash;
}
Is there a way to somehow access or convert the file upload as base64, and use that as the attribute when making a request?
Where exactly should we add disableRoot: true
?
Thank you!
Hi,
Thank you for your effort but I am having some trouble,
I have simple form with just one field, on POST request instead of json I am getting something like:
------WebKitFormBoundary57pDcluXygbVh10c
Content-Disposition: form-data; name="config[myPropertyName]"; filename="test.txt"
Content-Type: application/octet-stream
------WebKitFormBoundary57pDcluXygbVh10c--
If I inspect file object in console it looks ok, even in my model it is there.
So from the readme it's obvious what gets set on the attribute, but what should the server respond with to send the file to the browser? Should there be a second attribute for the url (or image base64 data)?
See https://github.com/funtusov/ember-cli-form-data/blob/master/addon/mixins/form-data-adapter.js#L35 - currently only primitive values and arrays of them are handled properly.
Common use-case that I stumbled upon: User
model with relationship to UserData
, containing avatar
file attribute:
{
name: 'John Doe',
userData: {
avatar: (file),
},
}
I do not have time in the moment to look through the code and make a pr and what not. so I am just making a note here for me to come back to.
when I add the mixin to my adapter it messes up the serialization of other attributes. I have user_ids
that should be headed up to the server as an array of strings like so ["1", "2", "3"]
but actually gets sent up as just a string like this: "1,2,3"
.
After installing and setting up the ember-cli-form-data and adding "avatar: DS.attr('file')" to the user model in my case, when inspecting the browser with the Ember inspector I do not get the "avatar" property in the form of an Object.
Please also find attached all the settings from the models/user.js, adapters/user.js. fistures/user.js, controller.js and template.hbs.
I'm using Ember CLI Mirage fixtures, Ember Data 2.2.0, and Ember 2.2.0. Any idea what could happen?
Thank you!
In some cases, the hash
argument in ajaxOptions
is undefined. Wouldn't it be better to first call the _super
method and then modify the result ? Something like:
ajaxOptions: function(url, type, options) {
var hash = this._super.apply(this, arguments);
if (hash.data && this.formDataTypes.contains(type)) {
hash = this._setBaseFor(url, type, hash, this);
hash = this._setFormDataFor(hash);
hash = this._setHeadersFor(hash);
}
return hash;
},
What do you think ?
I'm really happy with using ember-cli-form-data
thanks!
Maybe this doesn't have much to do directly with this addon, but I was wondering if there was a standard way in my form of updating a preview thumbnail image when a new file is selected in the input file type.
The issue is that certain fields don't need to be FormData, only the attributes with the file
transform.
I'm seeing issues with certain libraries that expect arrays to come over as arrays, and not comma separated strings. This happens with hasMany
s when you POST an attribute as an array.
Seems like there should be a type check here.
I'm trying to implement ember-cli-form-data
to upload a file to my rails backend server which is using the CarrierWave
gem.
I followed your guidelines step by step but cannot get it to work properly.
In the request, the file is empty for some weird reason.
file => {}
I'm using the following versions:
Ember: 1.13.7
Ember data: 1.13.8
Could it be that ember-cli-form-data
doesn't work for these versions?
Currently, array values get serialized as comma-separated strings. This is less than ideal since the only real reason to use FormData over json is to handle files, and servers have a hard time figuring out your binary from strings like "[object Object], [object Object]".
Therefore, please consider changing:
https://github.com/funtusov/ember-cli-form-data/blob/master/addon/mixins/form-data-adapter.js#L18
Ember.keys(data[root]).forEach(function(key) {
if (typeof data[root][key] !== 'undefined') {
formData.append(root + "[" + key + "]", data[root][key]);
}
});
to...
Ember.keys(data[root]).forEach(function(key) {
if (Ember.isArray(data[root][key])) {
data[root][key].forEach(function(value) {
formData.append(root + "[" + key + "][]", value);
});
} else if (typeof data[root][key] !== 'undefined') {
formData.append(root + "[" + key + "]", data[root][key]);
}
});
If this is something we're interested in doing, please let me know and I will submit a PR after I fail my presentation on June 2nd
I'm unable to save a model due to ember-cli-form-data extracting the incorrect root.
Model:
export default Model.extend({
title: attr(),
image: attr('file'),
description: attr(),
thumbnail: attr(),
createdAt: attr('date')
});
Controller:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
submit() {
const model = this.store.createRecord('image', {
title: this.get('title'),
description: this.get('description')
});
const image = document.getElementById('image').files[0];
model.set('image', image);
model.save();
}
}
});
This is the resulting payload:
------WebKitFormBoundarydHjcL7c0dAoCTjNp
Content-Disposition: form-data; name="title[0]"t
------WebKitFormBoundarydHjcL7c0dAoCTjNp
Content-Disposition: form-data; name="title[1]"e
------WebKitFormBoundarydHjcL7c0dAoCTjNp
Content-Disposition: form-data; name="title[2]"s
------WebKitFormBoundarydHjcL7c0dAoCTjNp
Content-Disposition: form-data; name="title[3]"t
------WebKitFormBoundarydHjcL7c0dAoCTjNp--
Working through the breakpoints I see this in the ember-cli-form-data adapter:
_getFormData: function _getFormData(data) {
// data is {title: 'test', description: 'test', image: File}
var formData = new FormData();
var root = Object.keys(data)[0]; // root is 'title'
Hi,
I recently upgraded my Ember app from 3.9 to 3.10, and my Rails app from 4.x to 5.x. My form data used to work fine, but now it does not - it reports a JSON::ParseError.
Looking at the package.json I see that your add-on did not change => I assume the same form data params are being sent to the server.
The Rails gemfile.lock file informs me that the json gem went from 1.8.3 to 2.2.0 (major number change => uh, oh... as we all know ;-)
Given that your add-on stayed the same and the json gem changed a lot tells me that the problem is most likely on their end. I am asking this same question on their "Issues" page; I am asking it here because maybe someone has run into this problem and can help me out. (Obviously, if I get an answer over there I will post it here so that maybe it will help others.)
My form isn't that complicated; just the usual stuff with a user-image capability. Also, I figure that this add-on must be used a lot with the latest Ruby/Rails JSON gem => seems like this should "just work" like it used to.
Below is the output I am seeing. Any help will be greatly appreciated, as I am stuck with not being able to create/update users. BTW, I tried backing off the JSON gem from 2.2.0 to 1.8.3 but could not do it due to a variety of bundler errors.
Thanks,
Larry
785: unexpected token at '------WebKitFormBoundaryyBVIQZp7P07Edby7
Content-Disposition: form-data; name="user[state]"
MA
------WebKitFormBoundaryyBVIQZp7P07Edby7
Content-Disposition: form-data; name="user[district]"
3
------WebKitFormBoundaryyBVIQZp7P07Edby7
Content-Disposition: form-data; name="user[username]"
joesmith
------WebKitFormBoundaryyBVIQZp7P07Edby7
Content-Disposition: form-data; name="user[email]"
[email protected]
------WebKitFormBoundaryyBVIQZp7P07Edby7
Content-Disposition: form-data; name="user[password]"
pword
------WebKitFormBoundaryyBVIQZp7P07Edby7
Content-Disposition: form-data; name="user[first_name]"
Joe
------WebKitFormBoundaryyBVIQZp7P07Edby7
Content-Disposition: form-data; name="user[last_name]"
Smith
------WebKitFormBoundaryyBVIQZp7P07Edby7
Content-Disposition: form-data; name="user[password_confirmation]"
pword
------WebKitFormBoundaryyBVIQZp7P07Edby7--
'
151 # additions even if a matching class and create_id was found. This option
152 # defaults to false.
153 # * *object_class*: Defaults to Hash
154 # * *array_class*: Defaults to Array
155 def parse(source, opts = {})
> 156 Parser.new(source, opts).parse
157 end
158
159 # Parse the JSON document _source_ into a Ruby data structure and return it.
160 # The bang version of the parse method defaults to the more dangerous values
161 # for the _opts_ hash, so be sure only to parse trusted _source_ documents.
Source files are updated, but version is not updated, version of npm package is still the same 1.1.0 (published a year ago).
Please publish the changes.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.