I have a legacy app that has five separate file uploads for a single DB record. Beside each file upload there is a field to enter a caption for the uploaded file.
I am considering replacing the whole lot with a fineUploader gallery and allow up to ten files to be uploaded.
However, it was useful on the old system to have a caption with each image for the ALT tag of the image when it comes to web display.
I could address this with multiple single file uploads using fineuploader and a caption field for each but I want to get away from having so many on the page.
I see there is an option to change the file name during upload so that might be an option but that could lead to very long/messy file names and may cause issues with accents and other characters.
Can anyone suggest a good approach?
I would suggest considering you use the built-in edit filename feature, as this seems most appropriate to me and will certainly be the simplest approach.
Another approach involves the following:
Add a file input field to your Fine Uploader template. This will hold the user-entered caption value. You will likely need some CSS as well to make this look appropriate for your project.
Initialize Fine Uploader with the autoUpload option set to false. This will allow your users to enter in captions and then upload the files by clicking a button (to be added later).
Register an onUpload callback handler. Here, you will read the value of the associated file's caption stored in the text input and tie it to the file with the setParams API method.
The file list portion of your template may look something like this:
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
...
<input class="caption">
</li>
</ul>
And your Fine Uploader code will contain this logic (important but unrelated options such as request.endpoint and element left out to maintain focus on your question):
var uploader = new qq.FineUploader({
autoUpload: false,
callbacks: {
onUpload: function(id) {
var fileContainer = this.getItemByFileId(id)
var captionInput = fileContainer.querySelector('.caption')
var captionText = captionInput.value
this.setParams({caption: captionText}, id)
}
}
})
Your server will receive a "caption" parameter with the associated value as part of each file's upload request.
Related
I'd like to attach images to certain cells of my Google spreadsheet, to appear upon hovering the mouse upon that cell, similar to how the native text-only regular cell notes (Shift+F2) appear.
Natively, Google Sheets supports inserting images in the cell. My image sizes are however too big, and I'd have to make the row/column width/height huge for them to be displayed at 100%. Plus, I'd want the images to only appear upon mouseover, and not always be visible.
(I should add that the functionality I describe is actually very easily achievable in Excel, which allows setting a picture-background for cell comments, something that Google Sheets does not.)
I discovered a Google Sheets addon which seems to extend regular cell notes to include richer content, including images. Inconveniently, it requires each image be uploaded to an image server rather than be loaded from the PC. That would have still been fine, except I couldn't get it to achieve the above stated goal.
Finally, I found this suggested workaround, which for me does not work, in the sense that the image is not loaded as a preview upon mousing over the URL (whether it ends with .jpg or not), only the URL itself is:
Interestingly, the effect I'm after actually exists in Google Docs, when the link isn't even an image but just a page:
Issue:
There is no native way to trigger actions on hover events in Sheets, and there is no way to retrieve images that have been uploaded from the computer and don't have a valid URL. This greatly limits what you can accomplish.
Nevertheless, there are workarounds available that can get you close to the functionality you're asking for.
Workaround (showModelessDialog):
You could, for example create a modeless dialog whose purpose would be to show the image corresponding to the selected cell.
Ideally, onSelectionChange trigger would be used, since this trigger to refresh the modeless dialog with current image when the user changes the selected cell, but since creating a modeless dialog requires authorization, simple triggers cannot run services that require authorization, and onSelectionChange is only available as a simple trigger (cannot be installed), that won't be possible.
So one possible workflow could be the following:
Show a modeless dialog when the spreadsheet is opened by a user.
The user selects the cell with the image that should be shown.
User clicks a button in the modeless dialog (or the previous image) to refresh the modeless dialog with the currently selected image.
How to do this:
To achieve this, you can follow these steps:
Install onOpen trigger that creates modeless dialog when the user opens the spreadsheet (the trigger needs to be installed, since, as I mentioned, simple triggers cannot use services that require authorization). To do that, go to the Apps Script editor (selecting Tools > Script editor), copy this function to your Code.gs file, and install the trigger following these steps:
function onOpenTrigger(e) {
var html = HtmlService.createTemplateFromFile("Page").evaluate()
.setWidth(800) // Change dimensions according to your preferences
//.setHeight(600) // Change dimensions according to your preferences
SpreadsheetApp.getUi()
.showModelessDialog(html, "My image");
}
Create the HTML template corresponding to the modeless dialog. The idea here would be: when the page loads, the currently selected image is shown. If the button (or the image itself) gets clicked, the page will refresh with current image (see retrieveImage and refreshImage). Create an HTML file in the editor via File > New > HTML file, and copy the following code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body onload="retrieveImage()">
<img id="currentImage" onclick="retrieveImage()" alt="No image is selected" width="600">
<button onclick="retrieveImage()">Click to refresh image!</button>
</body>
<script>
function retrieveImage() {
google.script.run.withSuccessHandler(refreshImage).getSelectedImage();
}
function refreshImage(imageUrl) {
if (imageUrl) document.getElementById("currentImage").src = imageUrl;
}
</script>
</html>
Back in your script file (.gs), create a function to retrieve the image URL from current cell (in case this cell has an image). This function will get called by the modeless dialog when it loads and when its button is clicked. It could be like this (regex is used to retrieve that — see this answer:
function getSelectedImage() {
var formula = SpreadsheetApp.getActiveRange().getFormula();
var regex = /=image\("(.*)"/i;
var matches = formula.match(regex);
return matches ? matches[1] : null;
}
Note:
You can adapt the dimensions of both the selected image (<img width="" height="">) and the modeless dialog (.setWidth, .setHeight) according to your preferences.
Reference:
Dialogs and Sidebars in G Suite Documents
Installable Triggers: Managing triggers manually
getActiveRange()
I am trying to copy an image taken from browser,from another web page.
When i paste it into the field (Edit Form), i have the same photo pasted two times in the area,so the same photo duplicated in the field.
Doing a check, i have noticed from the browser (Chrome v. 79.0.3945.117 ) that after doing the paste action,in the field i have:
<p>
<img data-cke-saved-src="data:image/png;base64,XXXXX" src="data:image/png;base64,XXXXX">
<img src="data:image/png;base64,XXXXX"><br>
</p>
where xxxxx is the base64 string.
How can i remove duplicate image?
Thanks a lot for any suggestion.
perhaps i have found a solution (i will monitor the behaviour of the library).
Adding:
ev.editor.on('paste', function (ev) {
console.log('some stuff');
});
i 've realized that the paste event arises for two times ( it is an unespected behaviour of ckEditor?) when i make the paste action with mouse or ctrl-v.
Anyway adding:
ev.data.html = ev.data.html.replace(/<imgimg data-cke-saved-src( [^>]*)?>/gi, '');
i have removed the first image apparently generated by CKeditor.
I put social pane on my form and when I press "add post" it adds a new one with an image of user with corrupted path to img src.
<img class="ef5505c7-2e73-e511-9457-0050569749e7" alt="Avatar" src="/myorganization/undefined/WebResources//msdyn_/Images/default_user_image_small.png?ver=-35756626">
Any idea how to fix it?
This is a super quick and dirty fix but it should theoretically work. The new source does the same thing that the corrupted one would had it not been corrupted in the first place. Also take into consideration, this is assuming the corrupted URL is the same for all users with default user images. While I don't recommend this as a permanent fix, I figured I'd be the first to offer at least an option.
//Run on FormLoad
function FixImageSrc() {
//Get all images with corrupted src
$("img[src$='/myorganization/undefined/WebResources//msdyn_/Images/default_user_image_small.png?ver=-35756626']").each() {
//Assign new src to each image
$(this).attr("src", "/myorganization/WebResources/msdyn_/Images/default_user_image_small.png");
}
}
I have an uploader that has two modes where it uploads different file types. Which one is active depends on what the user is doing. I am using FineUploaderBasic.
Right now to dynamically modify the allowedExtensions I do something like this:
if(type==<?=Campaign_Placement::AD_TYPE_USER_FLASH?>) // SWF
uploader._options.validation.allowedExtensions = ['swf'];
else // Static image
uploader._options.validation.allowedExtensions = ['jpeg', 'jpg', 'gif', 'png'];
uploader.reset(); // Resets with the new extensions
And to modify the acceptFiles:
if(type==<?=Campaign_Placement::AD_TYPE_USER_FLASH?>) // SWF
$('input[name="userfile"]').attr("accept", "application/x-shockwave-flash");
else // Static image
$('input[name="userfile"]').attr("accept", "image/jpeg, image/jpg, image/gif, image/png");
Both are ugly ways to do this, would appreciate a simple way to do both of these through the API, or some other elegant solution. Thanks!
You have 3 other options to solve this problem:
Don't set the allowedExtensions validation value at all. Then contribute a validate event handler that returns false if the user has submitted an invalid file, based on the value of the select you have provided.
Simply construct or re-construct the uploader instance whenever the user changes their selection.
Consider using the relatively new extraButtons feature, where you can connect additional upload buttons to a single Fine Uploader with varying validation options. For example, you can contribute some default allowed extensions (tied to the default upload button), and then provide an extraButtons button with alternate allowedExtensions. Simply display the appropriate button via JavaScript when the user changes their selection.
I have a TinyMCE installation on a CMS and the users have been pasting in images which are of the inline data type. This kind of thing:
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="embedded folder icon">
They are pasting in some pretty large images, and the content gets stored in a database. This is making the database grow very quickly in size, and there is already a media upload component available, so how can I simply prevent the editor from accepting this type of image?
This depends on what you want.
Due to the fact that you won't be able to disallow this kind of element using valid_elements and child_elements you will have to go other ways.
Case 1: You do not want user to enter this kind of image onPaste.
You will need to use the paste plugin and set the parameter paste_pre
paste_preprocess : function(pl, o) {
window.console && console.log('Object', o);
window.console && console.log('Content:', o.content);
// modify o.content here -> remove images of that kind
o.content = o.content.substr(...)
}
Case 2: You want the images to be filtered out before they are getting saved into the DB.
You may use the tinymce setup paramter combined with onSave to get rid of them.
From what you describe you seem to be wanting Case 1.