How to add form fields to image preview? - filepond

In vue-filepond, I can drag or select files and they process fine, but I want to be able to submit user entered data along with each image. For example, they may want to tag the image or enter a title, etc..
I can't find any documentation on how to do this?

You can use the file.setMetadata method (https://pqina.nl/filepond/docs/patterns/api/file/#methods) to add metadata to each file, each upload will contain a File object and a JSON object (the JSON object will contain the metadata).

Related

How to save the image URL at the exact position where the image was included in React-Quill (MERN stack)?

I am building an application, on the front end there is there are a few fields, including a rich text editor (react-quill) that can take in an image. I have saved the values from the first page and displayed them back to the user for confirmation. In order to do so I used local storage in the form of formData as shown below
formData = {"questionTitle": "Here is a test field",
"questDesc": "<p>Here is the Image <img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU.. />” }
My problem is after confirmation, I am trying to push the formData to MongoDB but I need to save the image (in cloudinary) separately from the database. How do I send the image to Cloudinary and instead save the URL in the MongoDB at the exact position that was inserted in react-quill?
I want to know if there is a better solution to my problem. Currently, the image is in base64 in local storage, is there a way to just refer to the route of the image while in local storage, and push it to the cloudinary after confirming? All pointers, and suggestions welcome!!

Add Specific Image to Power Automate Compose Action

I am trying to create a PDF file from SP List data. I have successfully created the conversion, however I have not been able to figure out how to include specific image files in the compose. The project is an 'Employee Profile' PDF. I am able to call on an image for the header using that image's name. However, I have not figured out how to make that process 'dynamic'; Meaning, the image provide is specific to the 'fullname' (a column in the SP List) of the individual. In the attached the first redline is the header image. It works fine. The second redline is where I'd like to place the employee image.
I've attempted to mimic my original compose without success.

Attach a filename to a base64 image in a JSON file

I have an application that gets a JSON file via a web service. The JSON is fairly large, and represents a Person object, with typical properties such as first name, last name, title and image for example. The person's image is stored as a base64 field in the JSON. It is bound to an image tag using Angular. So for example, the HTML looks like this:
<img ng-src="data:image/jpeg;base64,{{ person.fileImage }}">
When the end user right clicks on the image and chooses to save the image, the browser defaults to the name "download.jpg". What I need to do is name the image so that when the user right clicks and chooses to save, it gives a meaningful filename, e.g.:
todd.davis.jpg
I'm not sure how to make this happen. I've seen some solutions that use an anchor tag with a download="todd.jpg" parameter, but that is not working for me. I think it expects an actual URL and in this case, I don't really have one. The image data is just embedded in the JSON.
Is there a way to manipulate this so that I can add a name to the image for saving purposes?

IN meteor how to upload album with text

Anyone know package?
I want to upload album with text on every image.
Basically I want to upload multiple image and every image must contain textbox for text. in meteor.
I want to store images' name in array for every user.
There are multiple solutions, you should try CFS: https://github.com/CollectionFS/Meteor-CollectionFS

How to add descriptions under uploaded images

I have created an image field in a content-type called "Products", but there is no description box option as it is shown in a file field. Is there any ways to add product descriptions under every product photos?
I know this isn't the optimal solution, but you could use field_collection to achive this.
Install the module and then add a new field of type field_collection to your content-type, then under admin/structure/field-collections you can add both an image and a textarea field. Now you should have the ability to add an image and a corresponding description to your node.
Try the Image Field Caption module for Drupal 7.
It adds an extra text area to image fields. It is similar to the alt/title text fields already available with an image field, except it is a text area that accepts long string or html content.
Download the module
Enable the module
Add a content type with an image field, or use an existing content type with an image field
Add or edit a node with an image field
Enter text or html into the image field caption text area
Save the node and view it to see the caption displayed below the image field
To override the way the caption is displayed, take a copy of the image_field_caption.tpl.php file and place it in your theme's directory, for example:
sites/all/themes/MY_THEME/image_field_caption.tpl.php
Now modify the html to meet your needs.
This has been identified as an issue - the integration of imagefield into core from D6 to D7 saw the unfortunate loss of the option for a description field in addition to alt and title.
Try this patch:
http://drupal.org/node/1067620#comment-5958190

Resources