I open a Radzen Blazor Dialog like this:
<div>
<a href="#file2" #onclick="#(async () => { var d = await
dialogService.OpenAsync<DrawerComponents.ShowFile>("Show File",
new Dictionary<string, object>() { { "Path", file2} },
new DialogOptions() { Width = "800px", Height = "600px" }); })"
#onclick:preventDefault="true">
#(file2.Substring(file2.LastIndexOf("/") + 1))
</a>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Small" Click="#(args => DeleteFile(item.Id, file.Substring(file.LastIndexOf("\\") + 1)))">
</RadzenButton>
</div>
When I open this dialog and view the file, then close dialog and then press delete button next to it, I recieve this error:
'The process cannot access the file 'C:\Users\...\drawerUpload\1\1\1\1\page3.jpeg' because it is being used by another process.'
When I delete the file without first viewing it, the delete is successful.
So the Opened .razor file 'DrawerComponents.ShowFile' (that is opened by DialogService), is not disposed after viewing it.
Since I recieve a variable from dialogservice I tried to do these: d.Dispose(); d = null; and d.Close(); after opening that didn't work.
How to dispose this?
Related
I have a component with a section tag with an id and ref of map. The id is used to load a Google Map, don't worry about this.
<section
id="map"
ref="map"
>
</section>
I have a function called showUserLocationOnTheMap() with a button called Map that's invoked when a User clicks on it. This function shows a marker on the map based on an address, that is stored in the db from a previous step.
showUserLocationOnTheMap(latitude, longitude) {
let map = new google.maps.Map(document.getElementById("map"), {
zoom:15,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId:google.maps.MapTypeId.ROADMAP
});
const marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map
});
google.maps.event.addListener(marker, "click", () => {
const infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(
`<div class="ui header">
<h6>company name</h6>
</div>
`
);
infoWindow.open(map, marker);
});
this.$refs.map.scrollToTop();
},
<button
#click="showUserLocationOnTheMap(item.profile.latitude,item.profile.longitude)"
class="apply-job-btn btn btn-radius btn-primary apply-it"
>
Map
</button>
What I'm trying to do is, I have a bunch of search results, so when someone is scrolling far down the page and they click the map button from the record, it will do two things.
It shows a marker on the map (This is working)
It scrolls back up to the top of the page so the User can see the Map with the marker on it.
WHAT I TRIED:
I created this function below:
scrollToTop() {
this.$el.scrollTop = 0;
}
I added a ref attribute called map to my Section tag and then at the end of my showUserLocationOnTheMap() function I called this line (as you can also see above).
this.$refs.map.scrollToTop();
The problem is I'm getting this error:
Cannot read property 'scrollToTop' of undefined"
I got a component that let's the user upload a profile picture with a preview before sending it off to cloudinary.
<template>
<div>
<div
class="image-input"
:style="{ 'background-image': `url(${person.personData.imagePreview})` } "
#click="chooseImage"
>
<span
v-if="!person.personData.imagePreview"
class="placeholder"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</span>
<input
type="file"
ref="fileInput"
#change="previewImage"
>
</div>
</div>
</template>
The methods to handle the preview:
chooseImage() {
this.$refs.fileInput.click()
},
previewImage(event) {
// Reference to the DOM input element
const input = event.target;
const files = input.files
console.log("File: ", input.files)
if (input.files && input.files[0]) {
this.person.personData.image = files[0];
const reader = new FileReader();
reader.onload = (e) => {
this.person.personData.imagePreview = e.target.result;
}
// Start the reader job - read file as a data url (base64 format)
reader.readAsDataURL(input.files[0]);
}
},
This works fine, except for when the user fetches a previous project from the DB. this.person.personData.imagePreview get's set to something like https://res.cloudinary.com/resumecloud/image/upload/.....id.jpg Then when the user wants to change his profile picture, he is able to select a new one from his local file system, and this.person.personData.imagePreview is read again as a data url with base64 format. But the preview doesn't work. Only when I change routes back and forth, the correct image selected by the user is displayed.
Like I said in the comment on my post. Turns out I'm an idiot. When displaying the preview, I used this.person.personData.imagePreview . When a user fetches a project from the DB, I just did this.person.personData = response.data. That works fine, apart from the fact that I had a different name for imagePreview on my backend. So I manually set it on the same load method when fetching from the DB like: this.person.personData.imagePreview = this.loadedPersonData.file. For some reason, that screwed with the reactivity of Vue.
After clicking an element on my webpage, I get the expected behavior from Response.Redirect in the trace, the break point on the expected page gets hit and proceeds to process normally. However when I'd expect the new page to be loaded, the display in the browser is not changed. It looks and behaves like the click brought you back to the same page.
I've moved the redirect call out of a try-catch block, and have tried different combinations of true/false as the second parameter with HttpContext...CompleteRequest()
What might prevent a page from being loaded after a call from Response.Redirect and the Page_Load sub completes?
Edit:
The site uses css and javascript to create a hoverable dropdown menu containing self referencing links, see below. I have tried using Chrome's dev tools to see what the network was processing. As far as I can tell from reading the Network Tab the click was creating the correct call; status 200, type xhr. xhr was the only thing that I found odd, but it looks like this is simply a reference to ajax? This leaves me in the same position. I am telling the site to redirect to new url, and I see the network take a request for that url, but the url in the address bar doesn't change; not the displayed page.
$(document).on('click','.navigation', function () {
loadItems($(this).attr('id'), $(this).attr('itemName'));
return false;
}
);
var loadItems = function (id, itemName) {
var editInfor =
{
"method": "getChildItems",
"id": id
};
$.ajax
(
{
type: "POST",
url: $.url,
dataType: "json",
data: JSON.stringify(editInfor),
success: function (jsonReply) {
$("#chkEnabled").attr('checked', jsonReply.enabled)
if (jsonReply.method == 'getChildItems') {
$("#childrens").html('');
var html = '<table>'
if (jsonReply.successfull) {
$.each(jsonReply.children, function (i, item) {
html += '<tr><td><span class="children">' + item.text + '</span></td><td><a class="moveItemUp btn" href="#" id="moveItemUp' + item.id + '">Move Up <i class="icon-circle-arrow-up"></i></a> <a class="moveItemDown btn" href="#" id="moveItemDown' + item.id + '">Move Down <i class="icon-circle-arrow-down"></i></a></td><td>Remove</td></tr>'
});
}
html += '</table>'
$($.childrens).html(html);
}
}
}
);
Please try this:
$.mobile.changePage( "/Exmaple.aspx", {
transition: "pop"
});
I'm creating a Google Web App (which is a HTML form) that will upload a file to a folder on My Drive. It's not required to have a file to upload, so there will be times where this input will essentially be "blank". The app works perfectly fine, except when you don't choose a file to upload. It spits out this error: "Exception: We're sorry, a server error occurred. Please wait a bit and try again." I have two files, the html file and the .gs file. Here's they are:
/* The script is deployed as a web app and renders the form */
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('FormFrontend.html');
}
/* This function will process the submitted form */
function uploadFiles(form) {
try {
/* Name of the Drive folder where the files should be saved */
var dropfolder = "Uploaded Files";
var folder, folders = DriveApp.getFoldersByName(dropfolder);
/* Find the folder, create the folder if it does not exist */
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropfolder);
}
/* Get the file uploaded though the form as a blob */
var blob = form.myFile;
var file = folder.createFile(blob);
var urlstr = file.getUrl()
/* Set the file description as the name of the uploader */
file.setDescription("Uploaded by " + form.ContactName);
/* Write response to spreadsheet */
var ss = SpreadsheetApp.openById("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
var responses = ss.getSheetByName("Responses");
responses.appendRow([form.CompanyName, form.ContactName, form.PhoneNumber, form.Email, form.Date, form.Severity, form.Details, urlstr])
/* As long as there's no errors you should se the below text */
return "Form Submitted Successfully "
} catch (error) {
/* If there's an error, show the error message */
return error.toString();
}
}
<html>
<body>
<!-- This is the actual HTML form -->
<div id="theform">
<form id="myForm">
<p style="font-size:30px">Customer Form</p>
Company Name:
<input type="text" name="CompanyName">
<br>Contact Name:
<input type="text" name="ContactName">
<br>Phone Number:
<input type="text" name="PhoneNumber">
<br>Contact Email:
<input type="email" name="Email">
<br>Date:
<input type="date" name="Date">
<br>Overall Severity: (1 Lowest, 5 Highest)
<br>
<input type="number" name="Severity" min="1" max="5" value="1">
<br>Details:
<br>
<textarea name="Details" rows=10 cols=65></textarea>
<br>
<br>Additional File (Optional):
<input type="file" name="myFile">
<br>
<!-- The submit button. It calls the server side function uploadFiles() on click -->
<input type="submit" value="Submit" onclick="this.value='Submitting..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
</div>
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>
</body>
</html>
<!-- The function will be called after the Google Script has executed -->
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
If have tried putting an IF statement around the "/* Get the file uploaded though the form as a blob */" section that tells it to just set urlstr to nothing if form.myFile is blank, but it still fails (but if you choose an actual file, it still completes successfully). I haven't been able to get anything helpful to show up in the logger either.
I'm fairly new to Google App Script, so any help would be appreciated!
This is what ended up working. The .getContentType seems to always return "application/octet-stream" when it's left blank and checking to see if the returned content type is that specific one worked.
/* Get the file uploaded though the form as a blob */
var blob = form.myFile;
var contentType = blob.getContentType();
if (contentType != "application/octet-stream") {
var file = folder.createFile(blob);
var urlstr = file.getUrl();
/* Set the file description as the name of the uploader */
file.setDescription("Uploaded by " + form.ContactName);
} else {
var urlStr = "None given";
}
I'd check what is actually getting returned into the variable blob.
var blob = form.myFile;
Maybe check the type with JavaScript typeOf.
var whatsTheType = typeOf blob;
In this test function:
function testIt() {
var newTestFile = DriveApp.createFile('New Text File', 'Hello, world!');
var myBlob = newTestFile.getBlob();
var whatsTheType = typeof myBlob;
Logger.log('whatsTheType: ' + whatsTheType);
}
JavaScript typeof returns the type of the blob as an "object". If you check the typeof, and it's not an object, then the file wasn't uploaded.
Put in an if conditional check, rather than a "try/catch". The "try/catch" obviously isn't keeping the code from dying.
if (whatsTheType === "object") {
//Create the file
var file = folder.createFile(blob);
};
Alternatively, you should be able to check the value property of the file picker to return a name, if a file was uploaded. If there is no name for the uploaded file, then the user didn't use the file picker.
In a Create view which properly starts with a...
#using (Html.BeginForm("Create", "Song", FormMethod.Post, new { enctype = "multipart/form-data" }))
and among a few other fields has a...
<div class="editor-field">
<input type='file' name="SongFileUpload" id="SongFileUpload" onchange="readURL(this);" />
#Html.ValidationMessageFor(model => model.SongData)
</div>
ending with a
<p>
<input type="submit" value="Create" />
</p>
if I browse for and select a filename which contains a beginning and ending parentheses within the name... when I click on the "Create" button to submit it... when just running of the localhost server VS2010 provides... it just bops right over to the IE (v10) error of....
>This page can't be displayed
>
>•Make sure the web address http://localhost:63129 is correct.
>•Look for the page with your search engine.
>•Refresh the page in a few minutes.
At first I thought it might be because the filename began with an "#" symbol. but that's not it as I can select another filename that is similarly as long but does not contain the parentheses and it jumps into the
[HttpPost]
public ActionResult Create( )
Like it should and everything works as it should.
What the heck as going on here?
Below is the JavaScript for the "readURL( )" function.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#SongMimeType').attr('value', input.files[0].type);
$('#SongData').InnerHtml = (e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
My guess is the JavaScript function is what might be blowing-up??
How would I fix it to handle this filenames with parentheses??