TipTap React Image Uploader with Placeholder - reactjs

I am trying to build plug in the image extension (#tiptap/extension-image) to my tiptap editor, however the issue I find is with bigger images, there is no easy way to add a sort of placeholder image or text to tell the user the image is being uploaded.
The current flow is this:
const imageUrl = await doUpload();
editor.chain().focus().setImage({ src: imageUrl }).run()
So between uploading the image and setting the image, there is a delay and no feedback to the user.
So I have tried to extend the Image extension and I am able to create a method to set some text, but then I am not sure how to clear that text. Does anyone have a good solution for this?

Related

Send a Pillow image in a Discord's embed

I have an image created using Pillow that I would like to send in an embed (ie by using embed.set_image) and without saving the image into the hard drive. I have seen other posts on Stack but they suggest sending the image as a file with
with io.BytesIO() as image_binary:
image.save(image_binary, 'PNG')
image_binary.seek(0)
await channel.send(embed = embed, file=discord.File(fp=image_binary, filename='image.png'))
which is not my usecase because it sends the image as a file and messes with the formatting (eg if I have a footer) - I want the image to be part of the embed.
Is it possible to do something along the lines of embed.set_image(image_binary)?

How to convert ByteArray to Image in Xamarin forms [duplicate]

So the simple idea is that I have SVG data as a string that I fetch from Internet.
I would like to show that as an icon in my app. Is there any way I can do this?
I have seen countless examples where SVG data is in a file located in the app's directory that is then showed but this is not what I am looking for. I literally have the data in XML format after http request and I only need to transform that to a Image or something else visible on the screen.
I have been trying to find a solution to this for hours now, so I would really appreciate some help :S
Android doesn't support svg with ImageView directly,you could display SVG with some commonly used third-party controls.
Like FFImageLoading.
Add Xamarin.FFImageLoading.Svg nuget package to platform project. Use ImageService with svg data resolver for displaying svg images.
For Android:
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
then use like:
var svgString = #"<svg><rect width=""30"" height=""30"" style=""fill:blue"" /></svg>";
ImageView imageView = FindViewById<ImageView>(Resource.Id.image_view);
ImageService.Instance
.LoadString(svgString)
.LoadingPlaceholder(placeHolderPath)
.WithCustomDataResolver(new SvgDataResolver(64, 0, true))
.WithCustomLoadingPlaceholderDataResolver(new SvgDataResolver(64, 0, true))
.Into(imageView);

React - export excel with image in cell

I would like to export a table data to an excel file.
I've got images in my data, and instead of see the url image, i want to have the image in cell.
I doesnt find any library to do it.
do you know one of it ?
Thanks

How to upload image with other data into the google drive app specific folder and get back into the app in json formate in Swift

I have successfully integration the google drive sync by using this link has the source code
And now I am not able to upload image with its name id and location,
I want to upload image with some other fields like name, height, width into the app specific private folder,
If this is not possible can any one suggest me how to go with this:
Actually I have to sync application list data in which list contains images, title, comments ratings and so forth. I am able to upload all other fields except images in json formate, any suggestion upload some type of approach to get this
Found the solution
It is not proper solution but till I am not getting the exact solution, perfect for me.
To upload image with other request data, I have followed following steps:
Convert the image into data using one of the following way
Swift 4
let dataObj = image.pngData()
Swift 3
let dataObj = UIImagePNGRepresentation(image)
And convert this data objet to string with utf8
let str = String(decoding: data, as: UTF8.self)
Use this string to upload with other requst param or data.
And don't forgot to mention the type with this, so that you can easily convert this string to data again and from data, image easily can convert.

Preview Image while file uploading using "UPLOADIFY"

I am uploading the file using the script from "UPLOADIFY" site, The image is uploading successfully, But Now I want to preview the image on my UI Page, I have written some script (Converted image into Base 64 Encrypted code) to preview the image.
Both the functionalities are working fine individually, But I am unable to execute both functionalities one by one. Here is the code I have used Please help Me.
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/js/uploadify/uploadify.swf',
'script' : 'index.php',
'fileExt' : '*.jpeg;*.gif;*.png',
'fileDesc' : 'Image Files',
'buttonText' : 'Select File',
'sizeLimit' : 102400,
'onSelect' : function() {preview(this);}
});
});
I'm assuming you would like to preview the image onSelect... That is not possible due to security measures in modern browsers which prevent local (user-local) images from being displayed. This means that in order to preview the image you must first upload it (for example, set the upload mode to 'auto' and then onComplete add the temporary image to a div) and then the user would have a button of some sort to 'confirm' that the temporary image is indeed the desired one. That button would then move the temporary image to a definitive folder and add it to the database.
Sorry for not adding code, but I think you can easily manage to do it on your own. There are some great tutorials around too.
Cheers

Resources