Now I can import some ready made images into the image resources, present them as options to the end-user on the XPage, and then based on their selection, compute the 'style' property to update the background image. But it still doesn't let the user upload their own image as background.
Is there any way that doesn't involve image resource at all? I'm thinking of doing the normal fileupload control. Let the user upload an image as an attachment into a document and then somehow compute the style property by referencing the image in the attachment but I'm not sure how to do that or if that's doable at all.
If you upload the image to a "User Settings" document and also calculate the filename in a field on the document and display these documents in a view sorted by the UserName. Get the path to the document using the logged in Users name and
Calculate the path to the image. The path should look something like this.
database path + name/view/UNID/$File/Filename
If you use a RichText Lite field to store your image and set it to Thumbnail (with no size restrictions), then you can specify a fixed filename (on second tab of properties for field)
You can then reference that attachment with a URL like Fredrick mentions.
Related
I manually inserted images into my collection table and into directus_files table with matching uuid and filename.
When I click on an item of my collection I can see the image however the thumbnails are broken:
I can see that if I manually upload an image through directus admin interface two thumbnails are created in the local folder with an uuid and a double underscore and a random hash I cannot figure out how is made.
Is there any way to regenerate the thumbnails?
Ok found out, you basically have to harness the REST API to regenerate the thumbnails otherwise Directus is not "smart" enough to regenerate them when you open an item from the collection or fallback to the original image.
The thumbnail also uses a strange hash in the filename derived from the creation time and user so you won't find the name explicitly in any table of the database.
The REST API has to be called as follows:
http://localhost:8055/assets/c1982e98-5b6d-4327-807a-2561002029d7?access_token=mytoken&width=60&height=60&quality=80
the access token is created from the user administration panel, the guid is the one in the database associated with the image.
Notice the width and height must be specified in the database table associated with the image otherwise the REST API will return a warning.
I have a form that allows the user to upload several images to a server. This form also allows the user to edit the form as well depending upon qs parameters. As additional information, I am using redux-saga with react, just to provide more background.
I am able to upload the image and allow the user to preview the image after they make their selection and before they upload it. However, upon reviewing the documentation, I do not see a way to populate the react-dropzone field when the user edits the other form items. I saw a way to do a preview onDrop but not with data coming from the server. I also found this article on Stackoverflow because am not sure if it could be applied to my case within the redux-saga scenario: How to add the URL of an image already uploaded, to Dropzone?.
Can this be done and if so how can it be achieved?
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.
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
},
I am trying to write a component based on the foundation Image component that will write the image to the DAM instead of the "local" jcr node on file upload. I also want it to activate the "DAM Update Asset" workflow so that it will create the different size renditions. Can you use a listener to write it to the DAM or is there another or better way to accomplish this?
I don't see a way to just do it within the component itself. But an EventListener could be triggered if someone uploads an image. In this EventListener you can move the image to a defined folder in DAM and start the workflows you want programmatically. Then you update the component so it references the new DAM asset instead of a directly attached nt:file.
Depending on which configuration of the image component you use and which browser is used, the upload is a bit different. The file usually first gets stored in /tmp and then moved. I am not sure it this only happens if the dialog is closed. So the safest way would be to await this event, eg. a add/change event on the jcr:lastModified property.