Scenario: the user picks a few choices, downloads a PDF. The user then changes a few choices, and downloads a new PDF.
Problem: everything works on the first run, but attempting to download a second PDF gives the user the same, old PDF.
Is there some way to "clear" or "kill" the old PDF? I tried setting the var doc to null before running the function again, and that didn't help. Somehow the first PDF being generated is all I'm able to serve.
Here is the code that makes the PDF. Those frontImg and backImg vars contain the dataURI.
$(".button").click(function(){
var doc = new jsPDF('landscape');
doc.addImage(frontImg, 'PNG', 0, 0, 300, 210);
doc.addPage('a6','l');
doc.addImage(backImg, 'PNG', 0, 0, 300, 210);
doc.save('file.pdf');
});
Anyone have any ideas here? Once the user takes actions that update the frontImg and backImg vars, shouldn't the PDF update too?
Related
I spend hours on end trying to fix this and I’m thinking of ditching expo all together. When I pick an image with the image picker and save it via AsyncStorage, everything works fine for a few minutes. I’m able to reload the app and the image is still showing. But after a few minutes the image disappears. I found some workarounds for the normal image picker, but not the expo one.
I also don’t think the URI points to the place where the image is stored, because the URI looks like this:
file:///var/mobile/Containers/Data/Application/7436CFB1-C537-4252-ACEC-5F7EC0866E2D/Library/Caches/ExponentExperienceData/%2540johannesdberg%252FAcropendium/ImagePicker/E8CE1793-3906-401A-AA3C-CB0907FA9E24.mov
Is there a way to get the right path to the image or make the URI persist?
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
})
if (!result.cancelled){
setImageUri(result.uri)
}
}
Side note:
Why isn’t anyone else running into that problem? Like do you store images/videos in a database or on a server? I think this problem should be well known, shouldn’t it?
I have an image that I loaded by using URLImage class. Here is the code:
EncodedImage placeholder = EncodedImage.createFromImage(Image.createImage(getWidth()/2, getWidth()/2 , 0xF92D2D), true);
Image originImg = URLImage.createToStorage(placeholder, imgFileName, photo_url);
To my understanding, this image is being saved into Storage with createToStorage() method. However, next time when I am loading this form, I don't want to download the image again, I want to take it from the Storage, because its faster.
So what I did, I added check :
if (Storage.getInstance().exists(imgFileName)) {
// Take the image from the Storage
originImg = Image.createImage(Storage.getInstance().createInputStream(imgFileName));
} else {
// Load the image with URLImage class.
}
However, it seems like my file is never saved into the Storage. What can be wrong?
You don't need to do that. URLImage seamlessly loads the file from storage if the file is already there. You can open the network monitor and see if a request is made to the URL for this specific image.
I'm not sure why the Storage.getInstance().exists(imgFileName) method would fail. I assume the image name is different in the different execution or something of that sort. You can see that images are created in your .cn1 directory.
I have my ExtJS 4.2.1 Application, where I have a reports section for generating and downloading PDF reports.
Right now in my controller I have this for downloading a file:
onPrint: function() {
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id: 'downloadIframe',
frameBorder: 0,
width: 0,
height: 0,
css: 'display:none;visibility:hidden;height:0px;',
src: '/api/report/GenerateReport'
});
}
Is working fine, but there are reports that take 5 to 10 seconds to generate, so the user might click several times the Print button because he doesn't know that a file it's being generated.
How can I show a mask "processing download" or something so I block the UI until the file is downloaded.
Thanks.
The parent panel that contains the Print button should have the attribute
waitMsgTarget: true,
and on the button's handler function, before you call onPrint(), add the line:
waitMsg: 'Processing download...',
Hope it helps.
The solution that I ended with is the following:
A. Call using Ajax a server method that will generate the file but will be stored temporarily on the server. Here I show a wait message
the name of the file is a Guid.
B. Once the file is created on server I responde the client with a the file name.
C. The client on success response creates an IFrame that it's src property points to the just created file URL.
D. The file is downloaded.
I am working on extjs 4.2 application. Trying to create a menu toolbar where I can add and delete files. For example:
When I press Open, I want to see the file browser window. And when I finish choosing the file and click "open", I will see something like this:
I know that I need to use onItemClick() function to open the browser. But I have no idea how to call that window. Also how can you program so only certain file extensions can be chosen.
I am guessing that once you press "open" on the file browser window, the file tree in the left panel will dynamically add that file. But have no idea how can I connect "open" to my tree.
Just to clarify - this is going to be user based app, it is not going to be a webapp. This will be opened in user's browser and that is it. No need to get some info from server or send something to client.
EDIT: I have been able to solve the part where you click on Open the file browser dialog pops up. Then when I select a file and press "open", it displays a message box with file's name.
Here is the code for that part:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', v);
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
Now the problem is that I need to get the FULL PATH of the file. This message only shows file's name. Any help?
Using files on the web can be tricky, so you're going to have to be patient, diligent, and be prepared for some self-learning.
A. If you want to be compatible with all browsers, you need to upload the file to a server, and have the server return info about the file. Or you can try Sencha Desktop Packager, flash, or signed Java Applets.
If you are okay with only modern browsers, you will need to read and learn the HTML5 File API. Here's a start:
https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader
B. Start with a filefield button for now, and add it as a menuitem later, just to keep things simple. You will want to listen to the filefield's change event if you want to read the file.
C. To restrict file types (only modern browsers allow this), you'll need to do something like this (audio/* is just an example):
{
xtype:'filefield',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
D. After you get the file, you will want to add it's info to the tree's TreeStore.
I am facing a slight issue while editing a file.
I am saving a file (image) with a certain name on ios using the code below.
But the problem is that when i replace the image stored in a file (eg temp.jpg) the app still picks up the previous image when i open the file. However the new image can be seen in the explorer.
If i restart the app the new image appears while opening the image.
var folder = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory, 'DocImages');
// DocImages is a folder for files
// ImageVar contains the blob for the new image from camera or gallery
// docImgModel is the model class containing the name and image path of the image
if(imageVar !== null && imageVar !== undefined){
if (docImgModel.imagePath !== null && docImgModel.imagePath !== undefined){
tempFile = Ti.Filesystem.getFile(docImgModel.imagePath);
if (tempFile.exists()) {
tempFile.deleteFile(); // deleting already existing file
}}
// in case of changing the image stored in a file(the case in which i have a
// problem) the imgFile(below) is same as docImgModel.imagePath (above)
imgFile = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory + 'DocImages/', filenameWithExtension); // creating a new file
// writing image to file
imgFile.write(imageVar);
Ti.API.info('new image saved');
}
}
I was wondering if titanium saves cache of the file already opened and is hence not able to show the new image.
If not, is there anything else i am doing wrong or something i could do to make it work.
I just want to show the new saved image. Is there any way to do it.
Thanks.
I haven't worked with opening files from the device, but I ran into a similar issue when trying to update data on my screen. If you are saying when you open the app and it loads the correct image comes up, then the code that you use to load the image appears correct and working. I assume that is the code you posted above. Even that appears to be a code fragment of a more complete file.
You didn't post any UI code, which is probably where your real problem is coming from. You have an object, a view of some sort I'm guessing, that is already rendered using the old image before you load the new image. So debugging, you might see the new image's data loaded in the code above, but the UI element hasn't been assigned or updated correctly.
As a test, I would suggest that you put some test code into your app that allows you to destroy your UI elements and recreate them, you will probably see the picture come up properly in that case.
According to this post: http://developer.appcelerator.com/question/31181/simple-image-refresh
Just assigning the image you loaded to the url of the image should update it. Your example code doesn't show the image object that you are attempting to update and how that communication is made from the code that is loading the image.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
var image1 = 'image1.png';
var image2 = 'image2.png';
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
var img = Titanium.UI.createImageView({
width:100,
height:100,
top:50,
left:110,
url:image1
});
win1.add(img);
var btn = Titanium.UI.createButton({
title:'load',
width:100,
height:35,
top:50,
left:0
});
function switchImage(){
if(img.url == image1){
img.url = image2;
} else {
img.url = image1;
}
}
btn.addEventListener('click',function(){
switchImage();
});
setInterval(switchImage,3000);
win1.add(btn);
//
// add tabs
//
tabGroup.addTab(tab1);
// open tab group
tabGroup.open();