I have a form and I'm using it to save() an ember model to the database.
This model should also have an image, so I want to create a zone like the one below:
User should be able to drag and drop a file from its file browser or selecting it using the blue button.
Also, how do I actually upload the file along with the other model properties?
You could use EmberDroplet addon and customize it to your needs (for example you can set file limit to 1 and customize CSS). To upload file you have to specify url property, eg:
App.XDropletComponent = Ember.Component.extend(Droplet, {
url: location.origin + '/upload'
});
And in your API endpoint (on server side) you could handle file upload + setting image path on model in database (simple string attribute with URL to your image so you can use it later in your application).
Then you could use didUpload hook to refresh your model (this way you get back image URL after upload).
Or you can use the filepicker.io Ember addon.
Source code and usage here.
Quick reference below.
Template:
{{ember-filepicker pickerOptions=pickerOptions
storeOptions=storeOptions onSelection='fileSelected'
onClose='onClose' onError='onError'}}
Controller actions:
fileSelected: function(params){
//save the params.url to your model
//the image is stored by filepicker on Amazon S3
},
Related
I have created an app on Podio. Items are attached to that particular app. In the items there is an option to upload an image. Now I am authenticated with the App ID and App Token from Podio PHP API. I get the file object and grab the thumbnail link. The thumbnail link is working on the browser where I am already logged into to Podio. But it does not working on private window. It redirects me to login page.
So my question is how could I get public access to the thumbnail link?
Short answer: you cannot.
Long answer: when Podio hosts a file, it checks if you're authorized to view it. So if you're logged in and viewing the url through your browser, it will show, otherwise not.
You would need to copy the image to a publicly accessible location. For example, on your web server:
$file = PodioFile::get($file_id);
$raw = $file->get_raw();
file_put_contents("/var/www/html/image_path/".$file->name, $raw);
Then you could view the file:
http://my_domain.com/image_path/image_name.png
You can get a "public url" for a file stored in image field using Globiflow (it is now available with a premium plan). I guess it adds some kind of a proxy layer for private files. So you may add a special field to store this public URL, set/update this field value with Globiflow workflow and use this URL for public pages.
Have not found public documentation for this, but the value "Public URL" is currently available for image fields, I've specially checked.
Problem Set: Client .posts image from form action='/pages/contact/image/something' to node.js and I .putItem to AWS S3. On the success response I would like to send the image url back to the client without refreshing the screen and update the location they wanted to add the image with the new src url.
If the page refreshes I lose the location where they wanted to upload the image. Open to any suggestions, I have looked at res.send, res.end, res.json, res.jsonp, res.send(callback): all of which overwrite(refresh) the client webpage with the array, text or context in general I am passing back to the client . Code below:
myrouter.route('/Pages/:Page/Image/:Purpose')
.post(function (req, res) {
controller.addImageToS3(req, res)
.then(function(imgurl){
//res.json({imgurl : imgurl});
//res.send(imgurl);
//res.end(imgurl);
//res.send(req.query.callback(imgUploadResponse(imgurl)))
<response mechanism here>
console.log('Image Upload Complete');
}, function (err){
res.render('Admin/EditPages', {
apiData : apiData,
PageId : PageId
});
});
});
Ideally there could be a passed parameter to a javascript function that I could then use: Example:
function imgUploadResponse(imgurl){
// Do something with the url
}
You, as a developer, have full control over the s3 url format. It follows a straightforward convention:
s3-region.amazonaws.com/your-bucket-name/your-object-name.
For example:
https://s3-us-west-2.amazonaws.com/some-random-bucket-name/image.jpg
While I would recommend keeping those details in the back-end, if you really want to avoid using res.send, you can basically make the front-end aware of the url formatting convention and present the url to the user, even before the image was actually uploaded (just need to append the name of the image to the s3-region.amazonaws.com/your-bucket-name)
Also, I'm not sure why your page would refresh. There are ways to refresh content of your page without refreshing the whole page, the most basic being AJAX. Frameworks like angular provide you with promises that allow you to do back-end calls from the front-end.
Hope this helps!
I have an ASP.NET Web API web service which I want to use for file uploading. The way I do this is that the client posts a JSON object to the service at http://myserver.com/api/images/upload .
The object would contain a base64 string representation of the image, plus some metadata, e.g:
{ companyId: 12345, image: "someBase64encodedStringRepresentingTheImage" }
I would like to use TinyMCE on the client side, but I can't figure out how to customize it such that images are uploaded to the server in that format. (Actually, it doesn't seem like TinyMCE comes with an image uploader at all)
TinyMCE 4.2+ actually has its own built in process for handling the upload of images that you place in the editor:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The basic process is that TinyMCE will create a separate HTTP POST for each image that you insert into the editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location.
The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
There is an option for you to write your own image handler if the default one is not sufficient:
https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_handler
I would recommend trying to use the uploader that comes with TinyMCE so you don't have to write and maintain your own code going forward (always easier) but if the built in code is not appropriate you can indeed replace it with your own function.
Is there a possiblity to have a callback in javascript or in the backing bean when the selected files in the primefaces upload has changed?
Background: after the user has chosen the files he can define some attributes for each file. So I want to upload the files only if the has defined these attributes and clicked the save button. If all is uploaded and then the attributes are defined, I have to place the files somewhere on the server I think.
The user must be able to select each file chosen for the upload to edit the attributes. There I need the chosen files after each changing.
I am using PF 5.2.6 and JSF 2.2.11.
Regards
Oliver
At least I solved it with this javascript:
$(window).load(function() {
var fileUpload = PF('docUploadWidgetVar');
var filesAr = fileUpload.files;
Object.observe(filesAr, function(changes){
console.log('upload files array has changed');
filesAr.forEach(function(file) {
console.log(file.name);
});
});
});
For this HTML 5 is needed as I know. I am using the advanced and multiple primefaces upload which is required for this anyway as I know.
I'm working on my first chrome extension, and using an image-based context menu item to capture the URL of a given image, and want to then display that image at a specific URL in a new tab. So, I need to pass the URL of the image clicked on (using srcUrl) to a specific script that can then render it on that page. Is it possible to perform an HMLHttpRequest from within a chrome.tabs.create() call, or must this be done some other way?
Thanks for any help.
You would need to create an HTML page containing that script and put it into your extension folder. Then you can just pass image url to it as GET parameter:
chrome.tabs.create({url: "local.html?img_url=...");
If url parameter is not enough, you would be also able to communicate with that page using chrome.tabs.sendRequest():
chrome.tabs.create({url: "local.html", function(tab){
chrome.tabs.sendRequest(tab.id, {img_url: "local.html?img_url=...");
));
With the request listener in that page:
chrome.extension.onRequest.addListener(function(request) {
console.log(request.img_url);
});