Unfortunately, I don’t see anything about the uploaded file, like the image you uploaded with your image. I am going to see if I can find help in finding the information you are looking for, as for now I can’t seem to gather that information you need.
You’ll need to, I’m afraid. I just looked at how you are saving the file:
File.FileName = upl.Form ("id") & ".jpg"
Which would always give it the name .jpg, right? You’ll need to at least get the image format, so as to know the correct extension to save the uploaded file under.
The file gets saved with the .jpg extension only. Is that good as for your concerns?
The upl.Form (“id”) needs to be removed as I previously mentioned. We had talked about the time stamp and append the file name.
So if I understand you correctly, you need me to get the data as it relates to the uploaded image so it reads it in the console?
What happens if you upload image.png?
Is it still saved as .jpg? Can you open the uploaded file and have it display correctly?
Yup.
png does upload with a .jpg extension. And it is viewable as a .jpg image.
Yeah, you’re going to have to sort that out, I’m afraid. You need to find a way to access the data that the client is passing to the server-side script via Ajax. The rest won’t work otherwise.
I’m completely unfamiliar with ASP.NET unfortunately, but Googling around suggests that you might need something like this: https://www.tutorialspoint.com/asp.net/asp.net_ajax_control.htm
I am not familiar with asp.net either. I use classic asp and unfortunately I don’t have all the answers and I am having a hard time finding someone to help me on the concepts that I don’t understand. Most everyone is moving to asp.net. I will be talking to someone tomorrow and hopefully have some answers. Thank you for this email, I appreciate your efforts in more ways that I can say.
1 Like
No worries. It would be good if we could come to a working solution for you 
1 Like
I did not see that earlier. Since you are using ASP Visual Studio is the editor you should be using.
I am not a moderator but it seems to me that this thread has gotten far from the original question. The reason I say that is that I am not sure what you are doing and there is so much in this thread to read that I don’t feel like trying to determine what the off-topic (from the thread subject) question is. I understand that you are trying to get a form processed. If you ask a new question with ASP as part of the subject/title then you are more likely to get help from someone familiar with ASP. If you create a new question that clearly explains the problem you are attempting to solve then I will try to help.
ASP Forms does provide an introduction to classic ASP.
Thank you for the code that uses Ajax to upload images to the server using the editor:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Full Editor - Quill Rich Text Editor</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" />
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css" />
<style>
body > #standalone-container {
margin: 50px auto;
max-width: 720px;
}
#editor-container {
height: 350px;
}
</style>
</head>
<body>
<div id="standalone-container">
<div id="standalone-container">
<div id="toolbar-container">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
</div>
<div id="editor-container"></div>
<br />
<center>
<form method="POST" action="post.asp" name="mainform">
<input type="hidden" id="myHtml" name= "myHtml">
<input type="submit" value="Submit">
</form>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
const editor = document.getElementById('editor-container');
const hiddenInput = document.getElementById('myHtml');
const form = document.forms.mainform;
const quill = new Quill(editor, {
modules: {
syntax: true,
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
form.addEventListener('submit', function(e){
e.preventDefault();
hiddenInput.value = editor.firstChild.innerHTML
this.submit();
});
function selectLocalImage() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.click();
// Listen upload local image and save to server
input.onchange = () => {
const file = input.files[0];
// file type is only image.
if (/^image\//.test(file.type)) {
saveToServer(file);
} else {
console.warn('You could only upload images.');
}
};
}
function saveToServer(file) {
const fd = new FormData();
fd.append('image', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/post.asp', true);
xhr.onload = () => {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(fd);
}
function insertToEditor(url) {
// push image url to rich editor.
const range = quill.getSelection();
quill.insertEmbed(range.index, 'image', `https://mydomain${url}`);
}
quill.getModule('toolbar').addHandler('image', () => {
selectLocalImage();
});
</script>
</body>
</html>
[off-topic]
I used to use the print_r(…); function but thanks to a Sitepoint member now use the following function because it is easier to type
<?php
function vd($var='Yes we have no $var???')
{
echo '<hr>';
var_dump($var); // line-feeds automatically added, no need for <pre>
echo '<hr>';
}
[/off-topic]
1 Like
Thanks, John.
In this case we were just returning a response from the PHP script to the client (i.e. the PHP script is never opened in a browser) so print_r was sufficient, but your function is good to know
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.