Save image temporarily loaded with "AsyncFileUpload"

Question

Save image temporarily loaded with "AsyncFileUpload"

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have the following to show an image when loading it with the AsyncFileUpload, the problem that I have is that it saves the image in the route that I put it, but I would like that route to be temporary because to save it I want to occupy the button, I can not find a way to show the images without saving the file and that is because it occupies memory and I can not delete it also in my folder I have twice the same file once I press the button

asp.net Code

<div class="col-xs-6 col-md-4">
<!-- imagen 1-->
<div class="thumbnail">
    <asp:Image  class="imgpub" src="../img/ico_img.png" ID="displayImage" runat="server"  />
<ajaxToolkit:AsyncFileUpload  PersistFile="true" class="pruebaos" ID="AsyncFileUpload2" runat="server" OnClientUploadComplete="uploadComplete" OnUploadedComplete="FileUploadComplete" />

<script type="text/javascript">
        function uploadComplete(sender, args) {
            var imageName = args.get_fileName();
            $get("displayImage").src = "<%=ResolveUrl(UploadFolderPath) %>" + imageName;
        }
</script>
    </div>
</div>
<div class="col-xs-6 col-md-4">
<!-- imagen 2-->
<div class="thumbnail">
    <asp:Image  class="imgpub" src="../img/ico_img.png" ID="Image1" runat="server"  />
<ajaxToolkit:AsyncFileUpload PersistFile="true" class="pruebaos" ID="AsyncFileUpload3" runat="server" OnClientUploadComplete="uploadComplete2" OnUploadedComplete="FileUploadComplete2" />

<script type="text/javascript">
        function uploadComplete2(sender, args) {
            var imageName = args.get_fileName();
            $get("Image1").src = "<%=ResolveUrl(UploadFolderPath2) %>" + imageName;
        }
</script>
    </div>
</div>

<div class="form-group">
<asp:Button ID="btn_gua_rda" runat="server" UpdateMode="Conditional" class="btn-full btn-lg btn-blue" Text="Publicar" onclick="btn_gua_rda_Click" ></asp:Button>
</div>
</div>

<asp:UpdatePanel ID="updboton"  runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn_gua_rda" />
</Triggers>
</asp:UpdatePanel>

This is the server side code to show the image:

        protected string UploadFolderPath = "~/images/alquilerimagenes/";

        protected void FileUploadComplete(object sender, EventArgs e)
        {
            string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
            AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);
        }
        protected string UploadFolderPath2 = System.IO.Path.GetTempPath();

        protected void FileUploadComplete2(object sender, EventArgs e)
        {
            string filename2 = System.IO.Path.GetFileName(AsyncFileUpload2.FileName);
            AsyncFileUpload2.SaveAs(Server.MapPath(this.UploadFolderPath2) + filename2);
        }

and for the button click event, the one that keeps the database has the following code (I would like it to be saved when you click on the image), not when you see it on my page

 protected void btn_gua_rda_Click(object sender, EventArgs e)
    {
        //Insertar Imagenes
                if (AsyncFileUpload1.HasFile)
                {
                    string SavePath = Server.MapPath("~/images/alquilerimagenes/") + va_cod_pub;
                    if (!Directory.Exists(SavePath))
                    {
                        Directory.CreateDirectory(SavePath);
                    }
                    string extencion = Path.GetExtension(AsyncFileUpload1.PostedFile.FileName);
                    AsyncFileUpload1.SaveAs(SavePath + "\" + tb_tit_pub.Text.ToString().Trim() + "01" + extencion);
                    //guarda en la base de datos
                    o_ima001._02(tb_tit_pub.Text.ToString().Trim() + "01", extencion, va_cod_pub.ToString());
                }
                if (AsyncFileUpload2.HasFile)
                {
                    string SavePath = Server.MapPath("~/images/alquilerimagenes/") + va_cod_pub;
                    if (!Directory.Exists(SavePath))
                    {
                        Directory.CreateDirectory(SavePath);
                    }
                    string extencion = Path.GetExtension(AsyncFileUpload2.PostedFile.FileName);
                    AsyncFileUpload2.SaveAs(SavePath + "\" + tb_tit_pub.Text.ToString().Trim() + "02" + extencion);
                    //guarda en la base de datos
                    o_ima001._02(tb_tit_pub.Text.ToString().Trim() + "02", extencion, va_cod_pub.ToString());
                }

    }

c# ajax asp.net

asked by aldair guzman bolaños 23.10.2018 в 20:36

source

2 answers

Verify the connection of a selenium Android Studio - can the progressbar be customized like windows 10?

score 0 · Answer 1

@francisco try to apply Drpify to my code and it is as follows But it still does not work Dropify - Override your input files with style.

</head>
<body>
    <form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div class="container">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <h2>Now</h2>
                <label for="input-file-now">Your so fresh input file — Default version</label>

                <input type="file" id="input-file-now" class="dropify" />

                 <ajaxToolkit:AsyncFileUpload PersistFile="true" type="file" id="fil_up1" class="dropify" runat="server" />

                <br />
            </div>
        </div>
    </div>
         <div class="form-group">
            <asp:Button ID="btn_gua_rda" runat="server" UpdateMode="Conditional" class="btn-full btn-lg btn-blue" Text="Publicar" OnClick="btn_gua_rda_Click1" ></asp:Button>
        </div>
        <asp:UpdatePanel ID="updboton"  runat="server" UpdateMode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btn_gua_rda" />
            </Triggers>
        </asp:UpdatePanel>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/dropify.min.js"></script>
    <script>
        $(document).ready(function(){
            // Basic
            $('.dropify').dropify();

            // Translated
            $('.dropify-fr').dropify({
                messages: {
                    default: 'Glissez-déposez un fichier ici ou cliquez',
                    replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                    remove:  'Supprimer',
                    error:   'Désolé, le fichier trop volumineux'
                }
            });

            // Used events
            var drEvent = $('#input-file-events').dropify();

            drEvent.on('dropify.beforeClear', function(event, element){
                return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
            });

            drEvent.on('dropify.afterClear', function(event, element){
                alert('File deleted');
            });

            drEvent.on('dropify.errors', function(event, element){
                console.log('Has Errors');
            });

            var drDestroy = $('#input-file-to-destroy').dropify();
            drDestroy = drDestroy.data('dropify')
            $('#toggleDropify').on('click', function(e){
                e.preventDefault();
                if (drDestroy.isDropified()) {
                    drDestroy.destroy();
                } else {
                    drDestroy.init();
                }
            })
        });
    </script>
        </form>
</body>

score 0 · Answer 2

Good morning, I recommend that you use css for that or in its absence a jquery plugin, which instead of creating an image with a "temporary route" will only create a preview, so that later, by means of the button assigned, you can upload it with the route you define.

I leave the link of a plugin which I think is the best for the simple that is to use it but it gives a perfect finish to the way you upload your files or images, I use it a lot and it has not failed me to date: Dropify

Edited:

I leave the link where I reproduced an example of how to use the plugin: fiddle

You just have to assign it to your input file as I did in the example:

With that you will avoid the process that you carry out. Then the only thing you have to do is the following, when you use dropify, you select the photo and what it does is show you a preview of the img that you need to upload, it does not save it or anything. Then, having the preview, you save the step of uploading an image to see how it looks. Then the only thing that you have to do is the same but omitting the upload of the image 2. And finally, you assign the stored image to any control asp: img and your code should work correctly.

If you are having problems with the load or because it is returning null or false then it is not a synchronization problem, what may happen is that your second image is not saved yet and the process continues normally. For validity this could implement a While at the time of saving, check that the image already exists in the location, as long as it does not exist, that the code is "stagnant" and when it exists, you let it go and you should not have return problems false or null.

I hope I have helped you.